0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>We have already figured out how to set the font size, but how do we set the font itself?</p>
1
<p>We have already figured out how to set the font size, but how do we set the font itself?</p>
2
<p>We have a special property for this: font-family. A comma-separated list of font names is specified as the value of this property. We write our most preferred font at the beginning of the list followed by alternative fonts in order of preference. Include a general font family at the end of the list. The browser processes the list from left to right and uses the first font that is installed on the system or website. Example:</p>
2
<p>We have a special property for this: font-family. A comma-separated list of font names is specified as the value of this property. We write our most preferred font at the beginning of the list followed by alternative fonts in order of preference. Include a general font family at the end of the list. The browser processes the list from left to right and uses the first font that is installed on the system or website. Example:</p>
3
body { font-family: "PT Sans", "Arial", sans-serif; }<p>If the name of the font consists of several words, then it must be enclosed in quotes. Single names can be written either without quotes or with them for consistency. If the browser does not find any of the listed font names installed on the website or in the operating system, then it will use the last value - the general system font family. The most common font families are:</p>
3
body { font-family: "PT Sans", "Arial", sans-serif; }<p>If the name of the font consists of several words, then it must be enclosed in quotes. Single names can be written either without quotes or with them for consistency. If the browser does not find any of the listed font names installed on the website or in the operating system, then it will use the last value - the general system font family. The most common font families are:</p>
4
<ul><li><p>serif - A font with lines (serifs) at the end of some letters;</p>
4
<ul><li><p>serif - A font with lines (serifs) at the end of some letters;</p>
5
</li>
5
</li>
6
<li><p>sans-serif - A font that lacks these serifs.</p>
6
<li><p>sans-serif - A font that lacks these serifs.</p>
7
</li>
7
</li>
8
</ul><p>In fact, there are also less commonly used font families besides serif and sans-serif:</p>
8
</ul><p>In fact, there are also less commonly used font families besides serif and sans-serif:</p>
9
<ul><li>monospace - A font where with even spaces between characters;</li>
9
<ul><li>monospace - A font where with even spaces between characters;</li>
10
<li>cursive - An informal typeface, including, for example, ones that imitate handwriting or calligraphy;</li>
10
<li>cursive - An informal typeface, including, for example, ones that imitate handwriting or calligraphy;</li>
11
<li>fantasy - A decorative font face, such as the world-famous Comic Sans.</li>
11
<li>fantasy - A decorative font face, such as the world-famous Comic Sans.</li>
12
</ul>
12
</ul>