NOT supported in HTML5. Use CSS instead.

⚠️ DEPRECATED

Definition and Usage

⚠️ Warning: The  tag is NOT supported in HTML5. This tag was deprecated in HTML 4.01 and completely removed in HTML5.

The  tag was used in older versions of HTML to define the font face, font size, and text color for the contained text.

This tag has been replaced by CSS, which provides much more powerful and flexible text styling capabilities.

Important: Do NOT use this tag! Modern browsers may still render it for backward compatibility, but it is not valid HTML5. Always use CSS for styling text.

Browser Support

The  tag is NOT supported in HTML5:

Chrome

Not Supported

Firefox

Not Supported

Safari

Not Supported

Edge

Not Supported

Opera

Not Supported

Old Attributes (HTML 4.01)

These attributes were used with the  tag in HTML 4.01 but are no longer valid:

Attribute	Value	Description
color	rgb(x,x,x) #xxxxxx colorname	Specified the text color
face	font_family	Specified the font family (e.g., Arial, Verdana)
size	number	Specified the font size (1-7, with 3 as default)

Migration Guide: Use CSS Instead

✓ Modern Approach: Use CSS properties like color, font-family, and font-size to style text. This is the standard, supported method in HTML5.

❌ Old HTML 4 Way (Deprecated)

<font color="red" face="Arial" size="5">
  This is red Arial text
</font>

✓ Modern HTML5 Way (Recommended)

<p style="color: red; font-family: Arial; font-size: 24px;">
  This is red Arial text
</p>

CSS Replacement Examples

Changing Text Color

❌ Old Way

<font color="blue">Blue text</font>

✓ CSS Way

<span style="color: blue;">Blue text</span>

<!-- Or with CSS class -->
<style>
  .blue-text { color: blue; }
</style>
<span class="blue-text">Blue text</span>

Changing Font Family

❌ Old Way

<font face="Verdana">Verdana text</font>

✓ CSS Way

<span style="font-family: Verdana, sans-serif;">Verdana text</span>

<!-- Or with CSS class -->
<style>
  .verdana-font {
    font-family: Verdana, sans-serif;
  }
</style>
<span class="verdana-font">Verdana text</span>

Changing Font Size

❌ Old Way

<font size="5">Large text</font>

✓ CSS Way

<span style="font-size: 24px;">Large text</span>

<!-- Or with CSS class -->
<style>
  .large-text {
    font-size: 24px;
    /* Or use: 1.5em, 1.5rem, 150% */
  }
</style>
<span class="large-text">Large text</span>

Combining Multiple Properties

❌ Old Way

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

✓ CSS Way

<span style="color: red; font-family: Arial; font-size: 18px;">
  Styled text
</span>

<!-- Better: Use CSS class -->
<style>
  .styled-text {
    color: red;
    font-family: Arial, sans-serif;
    font-size: 18px;
  }
</style>
<span class="styled-text">Styled text</span>

Complete CSS Styling Examples

Using Inline Styles

Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Inline CSS Styling</title>
</head>
<body>
  <h1 style="color: navy; font-family: Georgia; font-size: 36px;">
    Main Heading
  </h1>
  <p style="color: var(--text-primary); font-family: Arial, sans-serif; font-size: 16px; line-height: 1.6;">
    This paragraph uses inline CSS for styling.
  </p>
</body>
</html>

Using Internal CSS

Example - Better Practice
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Internal CSS Styling</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: var(--text-primary);
      font-size: 16px;
      line-height: 1.6;
    }

    h1 {
      color: navy;
      font-family: Georgia, serif;
      font-size: 36px;
      font-weight: 700;
    }

    .highlight {
      color: red;
      font-weight: bold;
    }

    .large-text {
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>Main Heading</h1>
  <p>This paragraph uses <span class="highlight">CSS classes</span> for styling.</p>
  <p class="large-text">This text is larger.</p>
</body>
</html>

Using External CSS

Example - Best Practice
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>External CSS Styling</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 class="main-heading">Main Heading</h1>
  <p class="intro-text">This uses an external CSS file.</p>
  <p class="highlight-text">Important information here.</p>
</body>
</html>

/* styles.css */
body {
  font-family: Arial, sans-serif;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.6;
  margin: 20px;
}

.main-heading {
  color: navy;
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
}

.intro-text {
  font-size: 18px;
  color: #555;
}

.highlight-text {
  color: red;
  font-weight: bold;
  background-color: #ffe6e6;
  padding: 5px;
}

Advanced Font Styling

Example - Modern CSS Typography
<style>
  /* Using CSS custom properties (variables) */
  :root {
    --primary-font: 'Helvetica Neue', Arial, sans-serif;
    --heading-font: Georgia, 'Times New Roman', serif;
    --primary-color: #2c3e50;
    --accent-color: #3498db;
    --base-size: 16px;
  }

  body {
    font-family: var(--primary-font);
    color: var(--primary-color);
    font-size: var(--base-size);
    line-height: 1.6;
  }

  h1, h2, h3 {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--accent-color);
  }

  h1 {
    font-size: 2.5em;
    letter-spacing: -0.5px;
  }

  h2 {
    font-size: 2em;
  }

  .custom-text {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #e74c3c;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Responsive typography */
  @media (max-width: 768px) {
    body {
      font-size: 14px;
    }

    h1 {
      font-size: 2em;
    }
  }
</style>

Multiple Color Formats

Example - Different Ways to Define Colors
<style>
  /* Color name */
  .color-name {
    color: crimson;
  }

  /* Hexadecimal */
  .color-hex {
    color: #ff5733;
  }

  /* RGB */
  .color-rgb {
    color: rgb(255, 87, 51);
  }

  /* RGBA (with transparency) */
  .color-rgba {
    color: rgba(255, 87, 51, 0.8);
  }

  /* HSL */
  .color-hsl {
    color: hsl(9, 100%, 60%);
  }

  /* HSLA (with transparency) */
  .color-hsla {
    color: hsla(9, 100%, 60%, 0.8);
  }
</style>

Font Size Units

Example - Different Size Units
<style>
  /* Pixels (absolute) */
  .size-px {
    font-size: 16px;
  }

  /* Em (relative to parent) */
  .size-em {
    font-size: 1.5em;
  }

  /* Rem (relative to root) */
  .size-rem {
    font-size: 1.5rem;
  }

  /* Percentage */
  .size-percent {
    font-size: 150%;
  }

  /* Viewport width */
  .size-vw {
    font-size: 3vw;
  }

  /* Clamp (responsive) */
  .size-clamp {
    font-size: clamp(14px, 2vw, 24px);
  }
</style>

Why Was It Deprecated?

Separation of Concerns: HTML should define structure and content, while CSS handles presentation and styling
Maintainability: CSS makes it much easier to maintain and update styles across multiple pages
Consistency: CSS ensures consistent styling throughout a website
Flexibility: CSS offers far more control and advanced features than the font tag ever did
Accessibility: CSS provides better support for accessibility features and responsive design
Performance: External CSS files can be cached, improving page load times
Responsive Design: CSS enables media queries and responsive typography
Advanced Features: CSS provides shadows, gradients, animations, and many other features

Try it Yourself

Interactive Example

Compare old vs modern approaches:

❌ Old Way (Don't use this!):

Styled Text

✓ Modern Way (Use this!):

Styled Text

Try Modern CSS in Code Playground

Best Practices

Never use  - It's deprecated and your HTML won't validate
Use CSS classes - More maintainable than inline styles
Prefer external CSS - Better for performance and reusability
Use relative units - em, rem, or percentages for better accessibility
Include fallback fonts - Provide font stacks for better compatibility
Consider web fonts - Use Google Fonts or custom web fonts for better typography
Use CSS variables - For easier theme management and consistency
Think responsive - Use media queries for different screen sizes
Test accessibility - Ensure text is readable and contrast is adequate
Validate your HTML - Use W3C validator to ensure you're not using deprecated tags

Related Tags and Concepts

<basefont>
Also deprecated - use CSS instead
<style>
Contains CSS for the document
<link>
Links external CSS files
Inline container for styling

<font>

Definition and Usage

Browser Support

Old Attributes (HTML 4.01)

Migration Guide: Use CSS Instead

❌ Old HTML 4 Way (Deprecated)

✓ Modern HTML5 Way (Recommended)

CSS Replacement Examples

Changing Text Color

❌ Old Way

✓ CSS Way

Changing Font Family

❌ Old Way

✓ CSS Way

Changing Font Size

❌ Old Way

✓ CSS Way

Combining Multiple Properties

❌ Old Way

✓ CSS Way

Complete CSS Styling Examples

Using Inline Styles

Example

Using Internal CSS

Example - Better Practice

Using External CSS

Example - Best Practice

Advanced Font Styling

Example - Modern CSS Typography

Multiple Color Formats

Example - Different Ways to Define Colors

Font Size Units

Example - Different Size Units

Why Was It Deprecated?

Try it Yourself

Interactive Example

Best Practices

Related Tags and Concepts