HTML <font> Tag

What You’ll Learn

By the end of this tutorial, you’ll understand legacy font markup and the modern CSS techniques that replaced it.

The HTML <font> tag was historically used for styling text on web pages. This guide covers its syntax, deprecated attributes, use cases, best practices, and browser support so beginners can recognize old code and write modern CSS instead.

What Was the <font> Tag?

The <font> element was an inline HTML tag used for presentational text formatting. It let developers control font size, color, and font family directly in HTML using the size, color, and face attributes.

HTML5 moved presentational styling to stylesheets. Learn <font> to read legacy HTML, but style text with CSS in all new work.

.highlight {
  color: #2563eb;
  font-family: Arial, sans-serif;
  font-size: 1.125rem;
}

📝 Syntax (Historical)

Wrap styled text between opening and closing <font> tags. Set attributes on the opening tag:

<font size="4" color="blue" face="Arial">Styled Text Here</font>

Syntax Rules

• <font> is an inline element—it wraps words or phrases inside block content.
• Attributes like color and face are deprecated in HTML5.
• Self-closing syntax (<font />) is not valid in HTML.
• Do not nest multiple <font> tags unless maintaining very old code.

⚖️ <font> vs CSS Styling

Choose the right technique for text appearance:

⚖️ <font> vs <span>

Both wrap inline text, but only span fits modern HTML:

Examples Gallery

Historical <font> patterns plus modern CSS replacements. Legacy examples render for compatibility only—do not use in new code.

<font size="4" color="blue" face="Arial">Styled Text Here</font>

<p>This is a <font color="green">green</font> word in the middle of a sentence.</p>

<h2>Welcome to our <font color="red">red-themed</font> website!</h2>

<style>
  .styled-text {
    color: #2563eb;
    font-family: Arial, sans-serif;
    font-size: 1.125rem;
  }
  .green-text { color: #16a34a; }
  .red-text   { color: #dc2626; }
</style>

<p><span class="styled-text">Styled Text Here</span></p>
<p>This is a <span class="green-text">green</span> word.</p>
<h2>Welcome to our <span class="red-text">red-themed</span> website!</h2>

♿ Accessibility

Color alone does not convey meaning to all users:

• Do not rely on color only — pair color with text, icons, or semantic elements for important information.
• Use semantic tags — strong, em, and headings convey meaning; font does not.
• Check contrast — ensure text color meets WCAG contrast ratios against the background.
• Avoid font in new work — it mixes presentation into HTML and hurts maintainability.

💡 Best Practices