Home » HTML » HTML Font Tag

HTML Font Tag

HTML Font Tag plays a significant role in developing more user-friendly websites and increasing content readability. Font face and color depend entirely on the computer and the browser used to view the page, but we can use the HTML <font> tag to add style, size, and color to the text on your website. Let's start with html tags and different attributes like html font size, color.


HTML Font Tag Attributes

HTML Font Tag has three attributes called size, color, and face to customize the Font. To change any of the font attributes at any time within your webpage, use the <font> tag. The text that follows will remain switched until you close with the </font> tag.

How to change the html font size?

  • We can set html font size using size attribute.
  • The range of accepted values is from 1 to 7.
  • The default font size of a font is 3.
HTML Font Size Example: Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Font Size </title>
</head>
<body>
<font size="1">Hello HTML 5!</font>
<font size="2">Hello HTML 5!</font>
<font size="3">Hello HTML 5!</font>
<font size="4">Hello HTML 5!</font>
<font size="5">Hello HTML 5!</font>
<font size="6">Hello HTML 5!</font>
<font size="7">Hello HTML 5!</font>
</body>
</html>

Output

HTML Font Size Examples Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!

Explain: As you can see that, as the number increase the html font size will also increase.


The Font Face

You can set font face using 'face' attribute but be aware that if the user viewing the page doesn't have the Font installed, they will not see it. Instead, the user will see the default font style.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Font Face Attribute </title>
</head>
<body>
<font face="Times New Roman" size="5">Times New Roman</font>
<font face="Verdana" size="5">Verdana</font>
<font face="Comic sans MS" size="5">Comic Sans MS</font>
<font face="WildWest" size="5">WildWest</font>
<font face="Bedrock" size="5">Bedrock</font>
</body>
</html>

Output

HTML Font Face Attribute Examples Times New Roman
Verdana
Comic Sans MS
WildWest
Bedrock

Alternative Font Face

It is possible to specify two or more font face alternatives by listing the font face names, separated by a comma. If the user doesn't have one Font installed in his system, the other can display the content.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Font Face Alternative Attribute </title>
</head>
<body>
<font face="Times New Roman,Verdana,Comic sans MS,WildWest" size="5">Times New Roman</font><br />
<font face="Lucida Calligraphy,Comic Sans MS,Lucida Console" size="5">Bedrock</font>
</body>
</html>

Output

HTML Font Face Alternative Attribute Times New Roman
Bedrock

HTML Font Color Tag

HTML html font color tag can be set using the color attribute. You can specify the color you want by either the color name or by hexadecimal code for that color. The text color makes the website a more attractive look.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Font Color</title>
</head>
<body>
<font color="#69C">This text is in Blue</font><br />
<font color="green">This text is Green</font>
</body>
</html>

Output

HTML Font Color This text is in Blue
This text is Green

Well, as I said before, that html color is no longer used in HTML 5, so if you are working on an older version of HTML, then you can use the HTML font color tag as needed. Also, you can choose and add color code from the color picker tool.