# The “font” element is obsolete. Use CSS instead.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-font-element-is-obsolete-use-css-instead
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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:

| `<font>` attribute | CSS equivalent       |
|---------------------|----------------------|
| `color`             | `color`              |
| `size`              | `font-size`          |
| `face`              | `font-family`        |

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

```html
<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:

```html
<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:

```html
<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:

```html
<!-- 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:

```html
<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:

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