In this lesson you will learn more about how fonts in CSS can be used. We will also show how one can deal with the problem when a certain (special) font, which you have chosen for your site, does not appear because the host does not have this font installed.
Font family: the property ‘font-family’
The property font-family is used to create a prioritization list of fonts in which a particular element or a Web page should be displayed. If the first font is not installed on the computer with which the site is displayed the next one from the list is tryed until an existing matching font is found. There are two ways to categorize fonts: font families and generic (generic terms) families. The two expressions are explained below.
Examples of a font family (often known simply as “font”) are “Arial”, “Times New Roman” or “Tahoma”.
Generic families can probably be described best as a group of font families with a similar appearance. For example, “sans-serif” which includes fonts that do not have “feet”.
If the character set on your website list in general, one begins with the preferred character set and then adds a few alternatives. We recommend that you list with a generic family. This ensures that at least one character set of the same family is available.
An example for such a prioritization list of fonts could be as follows:
h1 (
font-family: arial, verdana, sans-serif;
)
h2 (
font-family: “Times New Roman”, serif;
)
Headings, which were marked with <h1>, are displayed with the font “Arial”. If this font is not on the user’s computer “Verdana” is used instead. If both scripts are not available, is a font from the sans-serif family for the headings used.
Please note that font names that contain spaces in quotation marks must be written. See “Times New Roman” in the above example.