HTML Fonts
What are the font in HTML
HTML fonts plays a very important role in developing more user friendly websites and increasing content readability. Font face and color depends entirely on the computer and the browser that is being used to view the page but we can use HTML <font> tag to add style, size, and color to the text on your website.
HTML Font Attributes
The font tag has three attributes called size, color, and face to customize the fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag.
HTML Font Size
- We can set font size using
size attribute.
- The range of accepted values is from 1 to 7.
- The default size of a font is 3.
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!
The Font Face
size attribute.<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>
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
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 be able to see it. Instead user will see the default font style.
<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
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 then the other one can be used to display the content.
<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
Bedrock
HTML Font Color
A font color can be set using color attribute. You can specify the color that you want by either the color
name or by hexadecimal code for that color. The text color make website more attractive look.
<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
This text is Green
You can choose and add color code from the color picker tool.
Color Picker
List of color names supported by all browser »
Character Code
List of character codes to display special character »
Language Code
List of all language supported by all browser »
Country Code
List of Country code supported by all browser »