Skip to content
How to Use HTML Font Face Attribute
The font face attribute
The font-face attribute sets the font or font family for the text in the web pages. For example, the font names like Verdana, Arial etc can be set by using this attribute.
You may prioritize the font face by adding a space between different font names. If you have multiple font names, the first font will be checked first. If this is not available in user’s browser the next one will be applied and so on.
The example below shows how to use the Font-Face attribute in HTML <font> tag.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Font </title>
</head>
<body>
<h1><font size=“6” face=“arial verdana”>This is heading 1 </font></h1>
<h2><font size=“4” face=“verdana arial”>This is Heading 2 </font></h2>
<p> <font size=“4” face=“Sans-serif verdana arial”>This is Paragraph </font></p>
</body>
</html>
|
Note that, the font attribute is not supported in HTML 5 version. In order to set the font face of the text, use the font-family property of the CSS. An example of using the font-family property is given below:
Example of using the Font Family property
The following example shows how to use the font-family property of the CSS.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<!DOCTYPE html>
<html>
<head>
<style>
/*Using CSS font*/
h1
{
font-family:Verdana, Arial, Serif;
font-size:25px;
background-color: #F0F0F0;
color: #355681;
}
h2
{
font-family:“Times New Roman”, Arial, Serif;
font-size:20px;
background-color: #355681;
color: #F0F0F0;
}
p
{
font-family:Arial, Verana, serif;
font-size:15px;
background-color: #F0F0F0;
color: #355681;
}
</style>
</head>
<body>
<h1>This is heading 1 with Verdana as primary font-family</h1>
<h2>This is Heading 2 with “Times New Roman” as primary font-family</h2>
<p>This is Paragraph with Arial as primary font-family</p>
</body>
</html>
|
As you can see in the font-family property, you can specify the font names just like in font face attribute of the <font> tag. You can separate the font names by spaces to set the priority.
The last font name in the list should be one of five generic family names that are always available in the HTML and CSS. The five generic font names are:
- Serif
- Sans-serif
- Cursive
- Fantasy
- Monospace
Also see CSS font | HTML forms
Leave A Comment?