HTML <font> Tag
The <font> tag was an HTML element used to specify the font face, size, and color of text. It was a common way to style text before the rise of CSS. However, the <font> tag is now deprecated and should not be used in modern HTML documents. Relying on this tag will lead to inconsistent rendering across different browsers and is not considered best practice for web development. Modern web development utilizes CSS for all styling purposes.
Syntax
<font face="font-family" size="size" color="color">Text Content</font>
Attributes
| Attribute | Value | Description |
|---|---|---|
face |
Font family name (e.g., "Arial", "Verdana") | Specifies the font family to be used for the text. Multiple fonts may be separated by commas and are used as fallbacks. |
size |
Numeric value from 1 to 7, or relative values like "+1", "-1" | Specifies the size of the text. Values range from 1 (smallest) to 7 (largest), with 3 being the default size. Relative values adjust the base size up or down. |
color |
Color name (e.g., "red", "blue"), hexadecimal value (e.g., "#FF0000"), or RGB value (e.g., "rgb(255,0,0)") | Specifies the color of the text. Can be a color name, a hexadecimal code or RGB value |
Example
<font face="Arial" size="4" color="blue">
This is blue text in Arial font with size 4.
</font>
More Examples
Changing the font face
<p>
<font face="Verdana">This is Verdana font.</font><br>
<font face="Georgia">This is Georgia font.</font><br>
<font face="Times New Roman, Times, serif">This is Times New Roman (or similar) font.</font>
</p>
This example shows how you can use the face attribute to specify different font families. Multiple font names are provided to be used as fallback options if the user's device does not have the first option.
Changing the font size
<p>
<font size="1">This is size 1 text.</font><br>
<font size="3">This is size 3 text (default).</font><br>
<font size="5">This is size 5 text.</font><br>
<font size="7">This is size 7 text.</font>
</p>
This example demonstrates different size values using size. Note that '3' is the default.
Changing the color
<p>
<font color="red">This is red text.</font><br>
<font color="#008000">This is green text.</font><br>
<font color="rgb(0,0,255)">This is blue text.</font>
</p>
Here, the color attribute is used with color names, hexadecimal codes, and RGB values.
Combining Attributes
<font face="Comic Sans MS" size="6" color="#FFA500">
This is orange Comic Sans MS with size 6.
</font>
You can combine all the attributes to set the font, size and color in a single tag.
Browser Support
The <font> tag is supported by all major browsers, including:
- Chrome
- Firefox
- Safari
- Opera
- Internet Explorer (all versions)
- Edge
However, despite browser support, its use is strongly discouraged in favor of CSS.
Notes and Tips
- Deprecation: The
<font>tag is deprecated in HTML5. This means it is obsolete and should not be used. - CSS is Preferred: Use CSS properties like
font-family,font-size, andcolorto style text. This offers far more flexibility and aligns with current web standards. - Avoid mixing: Do not mix the use of the
<font>tag and CSS as it can lead to maintainability and style conflicts. - Maintainability: Using CSS separates styling from content, making it much easier to maintain and modify the appearance of your website.
- Accessibility: CSS allows for more flexible control over text for accessibility.
- Consistency: Styling with CSS will ensure greater consistency across various browsers and devices.
- Legacy Code: You may encounter the
<font>tag in legacy code. It's best to refactor such code to use CSS instead. - Do not use it: In summary, the main message is, you should not use this tag in your project.
