Path // www.yourhtmlsource.com → Reference → <font>

<font>

by Ross Shannon

The <font> element was used to specify the font face, size, and color of text in HTML. It was a purely presentational element that mixed content with presentation, violating the separation of concerns that modern web standards promote.

Clock This page was last updated on 2025-11-17


Deprecation Warning

This element is deprecated and should not be used. The <font> element was deprecated in HTML 4.01 and is obsolete in HTML5. All text styling should be done with CSS.

The <font> element represents the old approach to web design where presentation was embedded directly in HTML markup. This made pages difficult to maintain and inconsistent across a site. Modern web development separates structure (HTML) from presentation (CSS).

Syntax

<font face="Arial" size="3" color="red">styled text</font>

The element required both opening and closing tags, wrapping the text to be styled.

Attributes

  • face - Font family name (e.g., "Arial", "Times New Roman")
  • size - Font size from 1 to 7, or relative values like +1 or -2
  • color - Text color as a color name or hex value

Modern Alternatives

Use CSS properties instead of the <font> element:

Old HTML (Deprecated)

<font face="Arial" size="4" color="#336699">Styled text</font>

Modern CSS Equivalent

<span style="font-family: Arial; font-size: 1.2em; color: #336699;">Styled text</span>

Better: External CSS

<!-- HTML -->
<span class="highlight">Styled text</span>

<!-- CSS -->
.highlight {
  font-family: Arial, sans-serif;
  font-size: 1.2em;
  color: #336699;
}

When to Avoid

Always avoid using <font>. There is no valid use case for this element in modern HTML:

  • It mixes presentation with structure
  • It makes sites harder to maintain
  • It doesn't support responsive design
  • It fails validation for HTML5 documents
  • CSS provides far more powerful and flexible styling options
  • <basefont> - Another deprecated element for setting default font properties
  • <span> - Modern inline container for applying CSS styles
  • <style> - Embed CSS styles in your document