HTML Font Tag (font): A Complete Guide

What is the HTML font Tag?

The <font> tag was used in older versions of HTML to define the font size, color, and family for the text within the tag. However, the <font> tag has been deprecated in HTML5 and is no longer recommended for use in modern web development. It is advised to use CSS (Cascading Style Sheets) for styling text, as it provides greater flexibility and control over the presentation of content.

Syntax of the font Tag

The basic syntax of the <font> tag is as follows:

<font color="color" size="size" face="font-family">Text</font>
  • color: Defines the color of the text.
  • size: Defines the size of the text.
  • face: Defines the font family.

Basic Example of Using the <font> Tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Font Tag Example</title>
</head>
<body>
    <font color="red" size="5" face="Arial">This is a text with a font tag.</font>
</body>
</html>

In this example:

  • The text is displayed in red (color="red").
  • The font size is set to “5” (size="5").
  • The font family used is Arial (face="Arial").

Attributes of the <font> Tag

color: Specifies the color of the text.

    • You can specify color by name (e.g., red, blue) or using hexadecimal (#FF0000) or RGB (rgb(255, 0, 0)).
<font color="blue">This text is blue.</font>

size: Specifies the size of the font.

  • The size is defined as a numeric value, with the scale ranging from 1 (smallest) to 7 (largest), or by using relative values (e.g., +1, -2).
<font size="4">This text is of size 4.</font>

face: Specifies the font family to be used for the text. Common font families include Arial, Times New Roman, Courier, etc.

<font face="Courier">This text uses Courier font.</font>

Why is the font Tag Deprecated?

The <font> tag is considered obsolete in HTML5. The reasons for its deprecation include:

  • Separation of Content and Style: HTML was originally designed to structure content, while CSS was created to handle the styling and presentation. The <font> tag mixes structure and style, which violates modern web design principles.
  • Flexibility of CSS: CSS provides much more powerful and flexible methods for controlling fonts, colors, sizes, and other visual aspects of text.

Using CSS instead of the <font> tag improves code maintainability, accessibility, and search engine optimization (SEO).

Modern Alternative: CSS Styling

Instead of using the <font> tag, you should use CSS to style text in modern web development. Here’s how you can achieve the same result using CSS:

Example: Using CSS for Styling Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Text Using CSS</title>
    <style>
        .styled-text {
            color: red;
            font-size: 24px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <p class="styled-text">This is styled using CSS instead of the <font> tag.</p>
</body>
</html>

In this example:

  • The text color is set to red using color: red;.
  • The font size is set to 24px using font-size: 24px;.
  • The font family is set to Arial using font-family: Arial, sans-serif;.

Best Practices for Text Styling

Use CSS Instead of the Tag

Use CSS Instead of the <font> Tag: For all text styling, use CSS. This ensures cleaner, more maintainable code.

  • Example: Using inline CSS:
<p style="color: blue; font-size: 18px;">This is styled with inline CSS.</p>

Use External or Internal CSS: For larger projects, it’s best to define styles in an external stylesheet or within a <style> block in the <head> section. This makes it easier to manage and update styles across multiple pages.

  • External CSS:

/* styles.css */
p {
    color: green;
    font-size: 16px;
}

Link the CSS file in HTML:

<link rel="stylesheet" href="styles.css">

Use Web Safe Fonts: Choose fonts that are commonly available across different devices. Examples include Arial, Times New Roman, and Courier.

  1. Ensure Accessibility: When styling text, consider accessibility factors, such as ensuring sufficient contrast between text and background, and providing legible font sizes.

HTML Font

Quiz: Test Your Knowledge of the <font> Tag