HTML <font> Element

HTML <font> Element

The <font> element was historically used to change the font face, size, and color of text directly within an HTML document. It became extremely common on early websites before CSS provided a separate and much more flexible way to control typography and presentation.

Historical Syntax

Older HTML documents may contain markup similar to the following:

<font face="Arial" size="4" color="blue">This text is blue, Arial, and larger than the default size.</font>

This code is shown for historical reference only. The <font> element and its presentational attributes should not be used when creating or updating modern HTML.

Attributes

The <font> element historically supported three primary element-specific attributes for controlling the appearance of its text. These attributes are obsolete along with the element and are included here to help identify and understand older HTML source code.

Historical Use

The <font> element allowed authors to change the appearance of individual words, phrases, paragraphs, and other portions of text directly in the HTML. The face attribute selected a typeface, size changed the text size, and color changed its color.

The historical size attribute commonly used values from 1 through 7, with 3 generally treated as the default size. Relative values such as +1 and -1 could also increase or decrease the size relative to the current base font size.

Because each piece of styled text could require its own <font> element, heavily formatted webpages often contained large amounts of repetitive presentational markup.

Why It Became Obsolete

The <font> element describes how text should look rather than what the text means. Mixing typography directly into HTML made pages harder to maintain because the same presentation settings often had to be repeated throughout many elements and pages.

CSS separates presentation from document structure and allows typography to be controlled with reusable rules. A single CSS rule can change the appearance of many elements throughout a page or an entire website without modifying each occurrence in the HTML. The <font> element was deprecated in HTML 4 and is obsolete in modern HTML.

Modern Alternative

Use appropriate HTML for the meaning and structure of the content, and use CSS to control its visual appearance. A <span> element can provide a styling hook when a portion of text has no more appropriate semantic element.

<p>This is <span class="highlight-text">custom styled text</span> using CSS.</p>

.highlight-text {
  font-family: Arial, sans-serif;
  font-size: 1.25em;
  color: #0088cc;
}

CSS provides considerably more control than the old <font> element, including font weight, style, spacing, line height, responsive sizing, web fonts, and many other typography options.

Legacy Browser Support

Modern browsers generally continue to recognize the <font> element and may still apply its historical color, face, and size attributes so older webpages remain readable. This is legacy compatibility behavior and does not make the element valid for use in modern HTML.

Existing <font> elements should be replaced with appropriate HTML and CSS when older webpages are updated.

For detailed legacy browser compatibility information, see Can I Use: HTML <font> Element .

Related Elements

The obsolete <font> element is closely related to the obsolete <basefont> element, which historically established general font settings for subsequent text. In modern HTML, the <span> element can provide a styling hook for inline content when needed, while CSS controls its presentation.

Specifications

The <font> element is listed as an entirely obsolete, non-conforming feature in the WHATWG HTML Living Standard . Authors should use CSS to control font presentation instead.