8.2. The font-family Property
The issue of font families gets tangled up with questions of standard versus nonstandard, and supported versus unsupported fonts, which are deserving of an entire section of this chapter. Here, I'll cover them briefly, but later in this chapter I'll cover the subject in much greater detail.
You can use the font-family property to assign a specific family, a list of specific families, and/or a generic family to any HTML block or element.
Most of the time, to achieve the result you want in the way the page looks, you'll supply a list of specific fonts, separated from one another by commas, and end the list with the generic font that is to be used if none of your specified fonts is available. Here's how that looks:
font-family: Arial, Helvetica, sans-serif;
Fonts are used in the order in which they are listed in the rule. In the above example, the browser will look to see if the user has Arial installed. If so, the text affected by this style rule will be shown in Arial. If Arial isn't present on the user's system, then the browser looks for the next font, Helvetica. If it finds Helvetica, it uses it. If it doesn't find Helvetica either, the browser uses whatever is defined as the default sans-serif font for the browser.
Generic FontsIt's worth pausing just a moment here to discuss how the browser gets its default sans-serif and other generic font settings. The browser has preset defaults for the following generic font families:
The user may, however, be able to change these default fonts through preference settings in the browser. If that's the case, then all bets are off. In such cases, the generic specification of sans-serif doesn't even guarantee a sans-serif font will be used. If the user has overridden the default value for sans-serif[1] to display a serif or monospaced font, for example, the user's settings trump your CSS rules. Regardless of how the browser arrives at its default setting for a generic font, that font will be used as the last resort in any case where a comma-separated list of font choices is defined, and none of the specific families of fonts is available. |
[1] No current browsers expose this setting to the average user, if they support changing it at all.
If the name of a specific family of font you wish to specify in a font-family property value list contains embedded spaces, you'll need to enclose that family name in quotation marks, as shown here:
font-family: "New Century Schoolbook", Baskerville, serif;
Note that while you will generally want to include only fonts of the same type (serif, sans-serif, monospaced, etc.) in your list, it is not mandatory that you do so. You can legally specify, for example, a list of specific font families that includes a sans-serif family, a serif family, and uses monospaced as the default. I'm not sure why you'd want to do this, but it is possible.