Quick Reach
Font family Property in CSS
To specify the font to be used for the text in your website, CSS provides the font-family property.
An example of font-family property
You may specify primary font family name as the first value and should give the fallback/backup font names as well in the font-family property.
In a case, the browser does not support the primary or first name of the font, it can choose the second one and so on.
Syntax to use CSS font family
This is how the font-family CSS property is defined:
font-family: Verdana, Arial, Times, “Times New Roman”, Serif;
So the font-family keyword is followed by the family name of your choice. The first name should be the one that you intend to use for the particular element (headings, paragraphs, lists etc.) or may be across the site.
The second font family name, which is separated by a comma, is the first backup in case the first font is not available and so on.
If a font name has multiple words, it should be enclosed in the double quotes e.g. “Times New Roman”. If you are using the font family in HTML attribute then it should be enclosed in single quotes.
The last font name in the list should be one of the five generic family names that are always available in HTML and CSS. The five generic font names are:
- Serif
- Sans-serif
- Cursive
- Fantasy
- Monospace
Example of using font-family
The following example shows how to use the font-family property. The example uses different font family names for headings and paragraph.
Experience this example 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
|
<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 demo, the h1 is given Verdana, h2 is “Time New Roman” and <p> tag is given the Arial as primary fonts, which is specified in CSS font-family property.
Also see: CSS font
Leave A Comment?