HTML <font> Tag

The <font> tag defines the font characteristics. Size, color and typeface are defined by the size, color and face attributes.

The <font> is a deprecated HTML tag, use CSS styles instead (see an example below).

Syntax

The <font> tag comes in pairs, the content is written between the opening (<font>) and the closing (</font>) tags.

Example of using HTML <font> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>
      <font size="2" color="#1c87c9">Blue text</font>
    </p>
    <p>
      <font size="3" color="red">Red text, font size increased.</font>  
    </p>
    <p>
      <font face="arial" color="#8ebf42">Green text, typeface changed.</font>
    </p>
  </body>
</html>

Result

CSS Styles

To change the color of the text, CSS color property is used instead of the color attribute. CSS font-family or font-face properties come to replace the face attribute, and instead of the size attribute, the CSS font-size property is used.

Example of changing the style of the text with CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="font-size:16px; color:#1c87c9;">Blue text.</p>
    <p style="font-size:18px; color:red;">Red text, font size increased.</p>
    <p style="font-size:18px; color:#8ebf42; font-family:arial;">Green text, typeface changed.</p>
  </body>
</html>

Attributes

Attribute Value Description
color rgb (x, x, x)
#xxxxxx
colorname		 Sets the color of the text.
face font_family Sets the typeface.
size number Sets the size of the text.

How to style <font> tag?

Common properties to alter the visual weight/emphasis/size of text in <font> tag:

  • CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
  • CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
  • CSS font-size property sets the size of the font.
  • CSS font-weight property defines whether the font should be bold or thick.
  • CSS text-transform Property controls text case and capitalization.
  • CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in <font> tag:

  • CSS color property describes the color of the text content and text decorations.
  • CSS background-color property sets the background color of an element.

Text layout styles for <font> tag:

  • CSS text-indent property specifies the indentation of the first line in a text block.
  • CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
  • CSS white-space property specifies how white-space inside an element is handled.
  • CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for <font> tag:

Browser support

Prev
Next

Do you find this helpful?

Related articles