HTML Guides for font

The <font> element was originally introduced to give authors control over text rendering directly in markup. A typical usage looked like <font face="Arial" size="3" color="red">. While browsers still render this element for backward compatibility, it has been obsolete since HTML5 and will trigger a validation error. The W3C validator flags it because it violates the principle of separation of concerns: HTML should define the structure and meaning of content, while CSS should handle its visual presentation.

Using <font> causes several practical problems:

• Maintainability: Styling scattered across <font> tags throughout your HTML is extremely difficult to update. Changing a color scheme could mean editing hundreds of elements instead of a single CSS rule.
• Accessibility: The <font> element carries no semantic meaning. Screen readers and other assistive technologies gain nothing from it, and its presence can clutter the document structure.
• Consistency: CSS enables you to define styles in one place and apply them uniformly across your entire site using classes, selectors, or external stylesheets.
• Standards compliance: Using obsolete elements means your HTML does not conform to the current specification, which can lead to unexpected rendering in future browser versions.

To fix this issue, remove every <font> element and replace its visual effects with equivalent CSS properties. The three attributes of <font> map directly to CSS:

You can apply CSS as inline styles for quick fixes, but using a <style> block or an external stylesheet with classes is the preferred approach for any real project.

Examples

Incorrect: using the obsolete <font> element

<p>
  <font face="Arial" size="4" color="blue">Welcome to my website</font>
</p>

This triggers the validator error: The “font” element is obsolete. Use CSS instead.

Fix with inline styles

If you need a quick, direct replacement:

<p style="font-family: Arial, sans-serif; font-size: 18px; color: blue;">
  Welcome to my website
</p>

Fix with a CSS class (recommended)

Using a class keeps your HTML clean and makes styles reusable:

<style>
  .welcome-text {
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: blue;
  }
</style>

<p class="welcome-text">Welcome to my website</p>

Nested <font> elements replaced with CSS

Old markup sometimes used multiple nested <font> tags:

<!-- Obsolete -->

<p>
  <font color="red" size="5">
    Important:
    <font face="Courier">code goes here</font>
  </font>
</p>

The correct approach uses <span> elements or semantic tags with CSS classes:

<style>
  .alert-heading {
    color: red;
    font-size: 24px;
  }
  .code-snippet {
    font-family: Courier, monospace;
  }
</style>

<p>
  <span class="alert-heading">
    Important:
    <span class="code-snippet">code goes here</span>
  </span>
</p>

If the text carries a specific meaning — such as marking something as important or representing code — consider using semantic HTML elements like <strong>, <em>, or <code> alongside your CSS:

<style>
  .alert-heading {
    color: red;
    font-size: 24px;
  }
</style>

<p class="alert-heading">
  <strong>Important:</strong>
  <code>code goes here</code>
</p>

This approach gives you full control over appearance through CSS while keeping your HTML meaningful, accessible, and standards-compliant.