HTML: <font> tag
This HTML tutorial explains how to use the HTML element called the <font> tag with syntax and examples.
Description
The HTML <font> tag defines the font size, color and face of text in the HTML document. Since this tag was removed in HTML5, it is recommended that you use CSS properties such as font, font-family, font-size and color to format the text in the document. This tag is also commonly referred to as the <font> element.
Syntax
In HTML, the syntax for the <font> tag is: (example that formats the text as red, uses to the font-family Verdana, Geneva, sans-serif and has a relative size of +1)
<body>
<p><font color="red" face="Verdana, Geneva, sans-serif" size="+1">Your formatted text goes here</font></p>
</body>
Sample Output
Attributes
In addition to the Global Attributes, the following is a list of attributes that are specific to the <font> tag:
Attribute |
Description |
HTML Compatibility |
color |
Color of text in either hexadecimal (ie: #RRGGBB format) or named color (ie: black, red, white) |
HTML 4.01 |
face |
Font to use for text. Listed as one or more font names (comma separated) |
HTML 4.01 |
size |
Font size expressed as either a numeric or relative value.
Numeric values range from 1 to 7 (1 is the smallest, 7 is the largest, 3 is the default).
Relative values can be values such as +1 or -2, increasing by one font size or decreasing by 2 font sizes, respectively. |
HTML 4.01 |
Browser Compatibility
The <font> tag has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the <font> tag below, exploring examples of how to use the <font> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
HTML5 Document
You can not use the <font> tag in HTML5. Instead, use CSS properties such as font, font-family, font-size and color to format the text in the document.
HTML 4.01 Transitional Document
If you created a new web page in HTML 4.01 Transitional, your <font> tag might look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Example 1 <font color="red">font color is red using a named color</font></p>
<p>Example 2 <font color="#FF0000">font color is red using hexadecimal format</font></p>
<p>Example 3 <font face="Verdana, Geneva, sans-serif">font face is a different font family</font></p>
<p>Example 4 <font size="5">font size is 5 using numeric value</font></p>
<p>Example 5 <font size="+2">font size is two font sizes bigger using a relative value</font></p>
<p>Example 6 <font color="red" face="Verdana, Geneva, sans-serif" size="5">combining attributes</font></p>
</body>
</html>
In this HTML 4.01 Transitional Document example, we have 6 <font> tag examples.
The first <font> tag shows how to set the font color with a named color while the second <font> tag shows how to set the font color with a hexadecimal value. The third <font> tag shows how to set the font face with a comma separate list of font families to use. The fourth <font> tag shows how to set the font size using a numeric value while the fifth <font> tag shows how to set the font size using a relative value.
The sixth <font> tag shows how to combine the color, face, and size together in the same <font> tag.
XHTML 1.0 Transitional Document
If you created a new web page in XHTML 1.0 Transitional, your <font> tag might look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Example 1 <font color="red">font color is red using a named color</font></p>
<p>Example 2 <font color="#FF0000">font color is red using hexadecimal format</font></p>
<p>Example 3 <font face="Verdana, Geneva, sans-serif">font face is a different font family</font></p>
<p>Example 4 <font size="5">font size is 5 using numeric value</font></p>
<p>Example 5 <font size="+2">font size is two font sizes bigger using a relative value</font></p>
<p>Example 6 <font color="red" face="Verdana, Geneva, sans-serif" size="5">combining attributes</font></p>
</body>
</html>
In this XHTML 1.0 Transitional Document example, we have 6 <font> tag examples.
The first <font> tag shows how to set the font color with a named color while the second <font> tag shows how to set the font color with a hexadecimal value. The third <font> tag shows how to set the font face with a comma separate list of font families to use. The fourth <font> tag shows how to set the font size using a numeric value while the fifth <font> tag shows how to set the font size using a relative value.
The sixth <font> tag shows how to combine the color, face, and size together in the same <font> tag.
XHTML 1.0 Strict Document
You can not use the <font> tag in XHTML 1.0 Strict.
XHTML 1.1 Document
You can not use the <font> tag in XHTML 1.1.