The ability to customize fonts — in Mac OS, in word processing documents, in Web pages — is really nothing new. However, when it comes to changing fonts on Web pages, the mechanism is decidedly less intuitive and certainly less than easy. Having to litter a Web page with <FONT face="..."> tags makes for larger files, and larger headaches as you weed through these tags to find that one misspelled word. CSS makes the process of selecting a font easy, and even better, it provides a fallback mechanism for those times when users don’t have the fonts you wanted to appear.

Basic Font Selection

Declaring the use of fonts is very easy in CSS. The general syntax is:

font: [comma-separated list of one or more fonts],
  [optional generic font family]

Let’s assume that you wish all headings to be rendered using Helvetica. To do this, you would write:

h1, h2, h3, h4, h5, h6 {font-family: Helvetica;}

Of course, you should consider that not every user will have Helvetica available. Perhaps the font was removed by the user, or corrupted through some means. By listing more fonts, the browser is able to choose the first available font in the list.

h1, h2, h3, h4, h5, h6 {font-family: Helvetica, 
  Arial, Geneva;}

Given the rule above, a browser will look for Helvetica first. If it does not find Helvetica in the font table, it will look for Arial. If Arial is not available, the browser next searches for Geneva. If it cannot find Geneva either, then it will use the default font, the same text it uses to display unstyled elements.

This ability to provide a list of alternative fonts is also useful in situations where a page contains unusual characters that may not appear in all fonts. Assume you have a page where some of the headings contain a few characters of Japanese Kanji. These will not appear in any normal Western font such as Helvetica. Thus the author of this page might create the following rule:

h1, h2, h3, h4, h5, h6 {font-family: Helvetica, 
  Arial, Geneva, Kanji2;}

In this case, the Western characters will be drawn from one of the first three fonts, and the Kanji will be taken from the last. Note that it is perfectly possible to reverse the order so that the Asian font is first in the list:

h1, h2, h3, h4, h5, h6 {font-family: Kanji2, 
  Helvetica, Arial, Geneva;}

Here, the browser will look first to Kanji2 for all of the characters on the page. If it does not match a character, then it will look for that character in the next font on the list. Thus, the vast majority of the page, which is in a Western language, will be drawn from Helvetica after failing to match any of the character in Kanji2.

When it comes right down to it, the responsibility for creating a list of similar-looking fonts falls to the author, not the browser. It is possible to list alternatives which look nothing alike. For example:

h1, h2, h3, h4, h5, h6 {font-family: Helvetica, 
  Times, Sand;}

This is of course not recommended, but it is still possible.

In cases where a font’s name uses more than one word, the font name must be quoted. The simplest case is a multi-word font name like New Century Schoolbook:

font {Times, "New Century Schoolbook", Garamond;}

Note that, in contrast to traditional American English, the commas are placed outside the quotation marks. Although double-quotation marks are more common, single-quotation marks are also acceptable.

Generic Families

There may be times when the lists you have seen so far are not enough. What happens if a browser doesn’t have access to any of the fonts listed? It will fall back on its default font, unless the author provides a generic family name to provide additional fallback. For example:

h1, h2, h3, h4, h5, h6 {font-family:  Helvetica, 
  Arial, Geneva, sans-serif;}

This final entry directs the browser to use any available Sans-serif font if it cannot find a match for the listed fonts.

There are five generic font families, although two of them are not particularly useful. These families are:

• Serif: fonts such as Times, New Century Schoolbook, and Garamond. The letters in a Serif font feature small caps, lines, and other decorations — the serifs which give this family its name.
• Sans-serif: fonts such as Geneva, Helvetica, and Arial. The letters of Sans-serif fonts have no serifs.
• Monospace: fonts where each character is the same width. This is in contrast to the vast majority of fonts, which are proportional — that is, the amount of horizontal space taken up by each letter is in proportion to its width, so that i is not as wide as w. Courier is the most commonly used monospace font. Note that monospace fonts can also be either Serif or Sans-serif. Courier is a Serif font, for example.
• Cursive: fonts which emulate human handwriting, such as Author. Cursive fonts are typically quite difficult to read on-screen, and their use is generally discouraged. Some browsers cannot even find and use cursive fonts.
• Fantasy: fonts which do not fit into the previous four families, such as Zapf Dingbats, Ventilate, or Klingon. Because this is a catch-all category, it is defined more by what it is not (the other four font families) than what it is.

It is possible to provide a generic family which does not match the specific fonts listed, but this is not recommended.

It is also possible to simply declare a generic font family without any specific font names. For example:

h1, h2, h3, h4, h5, h6 {font-family:  sans-serif;}

Cross-Platform Fonts

In a world with many different operating systems, it is important to know what fonts are widely available across platforms, and what close alternatives exist. Although you may like the look of Sand, and you know it’s installed on most modern Macs, its non-existence on Windows machines means that your page will turn out looking very different on various machines.

For a basic guide, please consult the following table. Note that the entry for Fantasy fonts is fairly suspect, since the catch-all nature of this font family means that the lack of a specific font could cause another, wildly different font to be substituted.

* installed by Internet Explorer (some systems may not have this browser)

As an example, consider a page where the default font is a Serif font, and headings should be in a Sans-serif font. One possible choice is:

BODY {font-family: "Times New Roman", Times, 
  "New Century Schoolbook", serif;}
H1, H2, H3, H4, H5, H6 {font-family: Arial, Helvetica,
  Verdana: sans-serif;}

For the BODY, the font Times New Roman was placed first so that it is the first font checked for. In a case where it has been installed on a Macintosh, it will be used there, as it will on practically every Windows system in the world. If a machine does not have this font, then the browser will go to the next one, Times, and so on. If none of the three fonts listed is available, then the browser will fall back to whatever Serif font it can find. Similar reasoning is used for the construction of the styles for headings.

Additional Information

• CSS2, Chapter 15: Fonts
• Agitprop, a series of discussions on font sizes