Font in HTML

The font tag is used to set the size, color, style and family of text in web pages. You can set the font of a specific section (like a paragraph, headings, div) in HTML documents separately.

For example, you need to set the bigger headings with a different font family while paragraphs with normal size and different font family.

The syntax of the font in HTML

<font color=”blue” size=”2”>HTML font</font>

After opening the <font> tag, you can specify the attributes of the font. This is followed by the text and then you have to close the font tag by using </font>, otherwise, the font will be applied to the following text until you close it.

Note that, the <font> tag is no more supported in HTML 5. Instead, you have to specify the font properties in CSS.

The examples below show how to use font tag in HTML. As such, the font tag is no more supported, I  have also used CSS for setting the font to achieve the same result so you may see the difference.

We will set the font in the headings and other text related tags of HTML with different font attributes.

The examples also show how to set the font properties in CSS and apply to the headings, <div> and <p> tags of HTML.

A few examples of font

Font size attribute with font tag example

Font color example in the font tag

Font color with CSS example

Font face example with Verdana, Arial

Font face with font-family property example

An example of font size attribute in the font tag

The font size attribute sets the size of the text. You should not use it in the future HTML coding. See the following example of using the font attribute:

Experience this online

Font size with CSS example

The following example sets the font size property inside the CSS block. 

Experience this online

The font color

The font color HTML attribute sets the color of text. You can give a color name like green, red, black etc. You can also use color codes in HEX or RGB format.

The following example shows how to use the font color attribute in the font tag. Below, you can also see setting the font color of the different text in HTML elements by using CSS.

Font color HTML tag

The example sets the font color in the font tag.

Experience this online

Font color with CSS

In this example, we will set the color for h1, h2, and <p> tag by using the font color property in CSS.

Experience this online

The Font Face

The font face attribute sets the font family of the text.

The example below shows how to use the font-face attribute in HTML font tag. Note that, the font tag is no more supported in HTML 5. See font-family section after this example.

Experience this online

For detail on font-face go to its chapter.

Font Family property of CSS

As such, the <font> attribute is not supported in HTML 5, this example shows how to use the font-family property in CSS to apply the font name to the different elements (h1, h2 and div tags).

Experience this online

The last font name in the list should be one of five generic family names that are always available in HTML and CSS. For detail about the font-family property and the generic names go to the font-family chapter.

The Font weight

In order to make the text bold or normal, the font-weight property is used. A value between thin and thick (normal to bold) can also be given. You can also use the <b> tag of HTML to make the text bold, however, like many other font properties can be set by using the CSS, this is recommended to use the font-weight property in CSS to make the HTML text bold.

Example of using font-weight

This example sets the font-weight of heading1 as bold, heading 2 as lighter and makes it normal for the paragraph.

Experience this online

Using the numeric value for setting font-weight example

A number can also be given in the font-weight property to specify from normal to the bold range. See the following example:

Experience this online

The font style property

The font style property is used to make the HTML text italic or oblique. The default value is normal.

HTML font style property example

The example below shows how to use the font style property:

Experience this online

Further Reading: HTML table tag HTML form