HTML Font Family
The font-family property sets the font or font family for text. For example font styles like Verdana, Arial etc. You may prioritize font by adding a space between font names. The first font will be checked first, if this is not available in user’s browser next one will be applied and so on.
As such <font> tag is not supported in HTML 5. This example shows how to use font-family property in CSS to apply font name to different text tags (h1, h2 and div tags).
|
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>heading 1 with Verdana as primary font-family</h1>
<h2>Heading 2 with “Times New Roman” as primary font-family</h2>
<p>Paragraph with Arial as primary font-family</p>
</body>
</html>
|
As you can see in font-family property you can specify font names just like in font face attribute of <font> tag. You can separate font names by spaces to set priority.
The last font name in the list should be one of five generic family names that are always available in HTML and CSS. The five generic font names are:
- Serif
- Sans-serif
- Cursive
- Fantasy
- Monospace
Also see HTML table | CSS font | HTML form | HTML Font
Leave A Comment?