8.6. Standard and Nonstandard Font Families

Earlier, when I discussed the font-family property , I indicated that a deeper discussion of the standard versus nonstandard fonts was requisite to a complete understanding of the issue of font families. This section provides that background.

What do I mean by standard fonts? There is no CSS standard or specification that determines what fonts will always be available on a user's system. It's also impossible to make any real assumptions about font availability on user systems that won't encounter some exceptions. In fact, there is not one font that is installed in common by default on both Macintosh and Windows operating system based computers. Not one. Can you believe that, after all these years?

There are, however, some fonts that are sufficiently similar across those platforms, that specifying them is both safe and mostly predictable. Table 8-1 lists the default fonts for Windows and Macintosh systems that are sufficiently similar to one another that specifying them as alternative fonts in a font-family property will produce fairly consistent results. If the user of a Windows or Macintosh computer installs any of several popular software products (including Internet Explorer and Microsoft Office), there is another set of fonts that are similar or identical; these are also listed in Table 8-1, but are not shown as installed by default.

Table 8-1. Font Commonality Across Windows and Macintosh Platforms

Font Name - Windows	Font Name - Macintosh	Default Install?
Courier New	Courier	Yes
Arial	Helvetica (or Geneva)	Yes
Times New Roman	Times (or New York)	Yes
Arial Black	Arial Black	No
Comic Sans MS	Comic Sans MS	No
Trebuchet MS	Trebuchet MS	No
Verdana	Verdana	No

While I've indicated that Helvetica is a reasonable substitute for Arial, the match is not clean. Geneva comes a bit closer to matching the look of Arial. A bigger concern with respect to Helvetica, though, is that it's an Adobe PostScript font. Most Macintoshes have no problem supporting Adobe PostScript fonts, and all the recent-vintage Macs that run the new OS X versions support these fonts natively. But few Windows and Linux systems include the Adobe software necessary to render Postscript fonts correctly, resulting in jagged-looking displays.

In addition to the fonts in Table 8-1, Microsoft at one time offered a free collection of downloadable TrueType fonts from its Websites. Due to licensing issues, Microsoft discontinued their availability, but thanks to a quirk in the original licensing, it was determined that anyone who had legally downloaded these fonts earlier could redistribute them. As a result, they are now available at http://corefonts.sourceforge.net. Additionally, these fonts are available in a form that works on Unix and Linux machines. They are:

• Andale Mono

• Arial

• Comic Sans

• Courier New

• Georgia

• Impact

• Times Roman

• Trebuchet MS

• Verdana

• Webdings

A significant percentage of systems in use today have these fonts installed, so they can be used, if not with absolute certainty, at least with some confidence.

8.6.1. Specifying Font Lists

As you know, when you define a font-family style rule, you generally supply not one font, but rather, a list of fonts separated by commas. Fonts that contain spaces must be enclosed in quotation marks.

But, what exactly does the browser do with this list of font families? Essentially, it begins with the first font family on your list and looks for it on the user's system. If it finds the first font, it uses it to display the text that is associated with the font-family property. Failing to find the first font, it moves to the second, then to the third, and so on.

To be just a bit more precise, the browser looks for the font families you specify in the places it has been told to look for fonts on the user's system. The font must be stored in a directory that the operating system or the browser normally searches for fonts. Some applications come with their own fonts and store them in nonstandard places; those fonts will remain invisible to the browser.

This left-to-right sequential font family searching technique produces two basic rules about the order in which you list font families in your styles.

First, you want to arrange the fonts in order from the most desirable to the least desirable appearance of the text.

Second, you want the last font on the list to be the generic name for the style of font family you're using (generally, serif, sans-serif, or monospace). This ensures that even if none of the fonts you specify is found on the user's system, at least the appearance won't be completely wrong.

Serif fonts such as Times New Roman have a small decoration or tail added to the ends of many of the lines in each letter. This helps to define the ends of the stalks of the font. Sans-serif fonts such as Arial have no such decorations on the end of lines. Typically, the stalks of a sans-serif font are straight and of uniform width. A monospace font is a font where each letter of the font occupies the same width, like a typewriter. A cursive font is intended to mimic the connected character style of handwriting. A fantasy font is a more decorative or fancy style of font.

Artistic views about which fonts look better on a Web page differ. Many people believe that serif fonts are easier to read because the small extenders along the bottoms of the letters give the eye something to track across a line. I'm not going to get into those issues here; there are many people more expert on the subject.

Figure 8-8 shows you a sample of each of the three most popular generic font-family types. As you can see, they are quite different from one another.

As a rule, then, you won't want to mix serif, sans-serif, monospace, cursive, and/or fantasy fonts in a single CSS style rule. You'll decide which type of font family you want to use, then list one or more font families in order of preference. Always end with the name of the generic font family that describes your choice of generic style.

The following three CSS style rules are typical of the usual sequencing you'd probably define:

p {
  font-family: "Courier New", Courier, monospace;
}

p {
  font-family: "Times New Roman", Times, serif;
}

p {
  font-family: Arial, Geneva, sans-serif;
}

The specific font families you specify need not be those shown in the examples, and the sequence isn't locked in concrete, either. The point is that in each case I've used font family names that specify common style, and then appended the generic family style name to the end of the list of specific fonts.

8.6.2. Using Nonstandard and Downloadable Fonts

As the user's browser will always display the text you present, no matter how you might mangle the font-family property's settings, it follows that you can certainly supply font family names that you have no way of knowing are installed on the user's system within reach of the browser. The worst-case scenario is that text displays in a way you would not have specified, and may not appreciate all that much, for that matter.

So, if you have an affinity for a particular font that is not normally installed on Windows machines, for example, and for which there isn't really a good Windows equivalent, you can specify it, and then design a sort of gradual degradation of the appearance of the content when the font isn't available.

Here, for example, is a situation where I've specified the Chicago font that Apple uses extensively on the Macintosh, but isn't supplied with Windows, and is almost never installed there.

h1 {
  font-family: Chicago, sans-serif;
}

Figure 8-9 shows what the display looks like in IE on a Macintosh where the Chicago font is available. On a Windows machine, this would display as the default sans-serif font, which might not be quite as aesthetic (or ugly, depending on your opinion of the stark Chicago font), but it will be as close as you're likely to come to matching the font cross-platform.

You can gain even greater control over the font family situation if you want to implement a solution that works only on IE^[3]. I never recommend such solutions, but you may find yourself on an intranet, for example, where the company dictates the browser to be used. In that case, special fonts such as corporate identity kit-standard fonts could be stored on a central server and dynamically downloaded by the browser as needed.

^[3] This technique is documented as part of the CSS2 recommendation, so even though it's only supported by IE at the moment, you can expect other browsers to add support as new versions are released.

To make this work, you have to take the following steps:

For example, let's say your company has a font it likes everyone to use on internal memos. You have been asked to place this font on the intranet so that people who wish to use their browsers to create memos in HTML format can do so while complying with the rules. The font is stored in a file called gigantico.eot^[4]. Assuming you've created the font definition file and stored it on the central corporate intranet server, you can associate the font with an arbitrarily chosen name using the following @font-face rule:

^[4] The .eot extension stands for Embedded Open Type, the standard format for such fonts.

@font-face {
  font-family: "Corporate Memo";
  src: url(http://mainserver.com/fonts/gigantico.eot);
}

With that definition in place, you can specify the font as you would any other font:

p {
  font-family: "Corporate Memo", sans-serif;
}

If the font in question has yet to be downloaded to the user's system when the page is ordered up, the browser will display the text in an alternative font taken from your font list, or from the system or browser default, while it downloads the font. After the font is downloaded, the page will be redrawn using the specified font where appropriate.

@font-face is just one of a number of special at-rules , so-named because they all start with a @ (at) symbol. In general, at-rules are supported only by recent browsers. The full range of at-rules is documented in Appendix A.