18.2. Font FamilyThe CSS specification provides the font-family property for specifying the font face for text elements.
Values:[[<family-name> | <generic-family> ] [,<family-name> | <generic-family> ]*] | inherit Initial value:Depends on user agent (the default font in the browsing device) Applies to:All elements Inherited:Yes Use the font-family property to specify any font (or list of fonts, separated by commas), as shown in these examples: h1 {font-family: Arial; } tt {font-family: Courier, monospace; } p {font-family: "Trebuchet MS", Verdana, sans-serif; } The value of the property is one or more font names, separated by commas. This allows authors to provide a list of fonts, starting with a first choice, followed by a list of alternates. The user agent (typically a browser) looks for the first font on the user's machine and, if it is not found, it continues looking for the next font in the list until a match is made. Note that in the third example, the "Trebuchet MS" is enclosed in quotation marks. Font names that contain character spaces must be enclosed in quotation marks (single or double). If the font name appears in an inline style, be sure to use single quotes if the style attribute uses double (or vice versa). 18.2.1. Generic Font FamiliesYou should include a generic font family as the last option in your list so that if the specified fonts are not found, a font that matches their general style will be substituted. Generic family names must never be enclosed in quotation marks. The five possible generic font family values are:
Figure 18-1. Serif and sans-serif font charactersFigure 18-2. Monospace and normal font characters18.2.2. Commonly Available FontsBecause a font will display only if it is available on a user's hard drive, it makes sense to design with the most commonly available fonts, particularly for sites with wide-reaching audiences. So, which fonts can you rely on? In general web design practice, designers tend to specify fonts from Microsoft's Core Web Fonts collection. This is a set of TrueType fonts (for both Windows and Mac) that have been specially designed to be easy to read on screens at small sizes. Microsoft released the fonts in 1996 and initially made them available for download. Today, they are installed automatically with Internet Explorer and other Microsoft software, so you can count on the majority of users having them available. Table 18-1 lists the fonts in the Core Web Fonts collection.
If you know your audience might have more specialized fonts installed, by all means, make a statement and go off the beaten path. You can always provide a more commonly available font as a backup in the list of font names. |