Ways to use HTML Font with 9 examples

The 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 font in HTML is:

<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 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. 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

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. Learn more about the font size property in its chapter.

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 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 font face attribute in HTML fonts 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

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 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 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 to make text bold to normal

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

Experience this online



Font weight with number value example

A number can also be given in the font-weight property to specify from normal to the bold range. A value of 400 means its normal and 700 means bold. See the following example:

Experience this online



Font Style

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



Learn more about HTML font style in its chapter.

Also see HTML table | CSS font | HTML form

Was this article helpful?

Related Articles

Leave A Comment?