EN
CSS - font-family
0 points
In this article, we would like to show you how to use font-family property in CSS.
Quick solution:
xxxxxxxxxx1
div {2
font-family: Arial;3
}multiple:
xxxxxxxxxx1
div {2
font-family: Arial, sans-serif, "Helvetica Neue";3
}
The font-family property is used to set the font for an element. You can specify multiple font names because if the browser doesn't support the first font from the list, it tries the next one.
The fonts:
- should be specified in the correct order, starting from the one you want the browser to try first and so on,
- they should be separated by a comma,
- if a font name contains white space, it has to be quoted.
In the example below, we specify three different font styles for div elements.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.verdana {7
font-family: Verdana;8
}9
10
.arial {11
font-family: Arial;12
}13
14
.courier {15
font-family: "Courier New";16
}17
18
19
20
</style>21
</head>22
<body>23
<div class="verdana">example text...</div>24
<br/>25
<div class="arial">example text...</div>26
<br/>27
<div class="courier">example text...</div>28
<br/>29
<div class="no-font">example text...</div>30
</body>31
</html>In this example, we combine the fonts from the previous section in the order we want them to be displayed. If the browser doesn't support Courier New, it will try to use Arial, then Verdana, etc.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.my-element {7
font-family: "Courier New", Arial, Verdana, Helvetica;8
}9
10
</style>11
</head>12
<body>13
<div class="my-element">example text...</div>14
<br/>15
<div class="no-font">example text...</div>16
</body>17
</html>