Web DevCenter    
 Published on Web DevCenter (http://www.oreillynet.com/javascript/)
 See this if you're having trouble printing code examples

Working with Fonts and CSS

by Eric A. Meyer and Apple Developer Connection

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.

Cascading Style Sheets: The Definitive GuideCascading Style Sheets: The Definitive Guide
By Eric A. Meyer
May 2000
1-56592-622-6, Order Number: 6226
467 pages, $34.95

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

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.

Generic FamilyCommon Macintosh FontsCommon Windows Fonts
Serif Times, New Century Schoolbook, Palatino Times New Roman, Georgia
Sans-serif Helvetica, Arial, Verdana* Arial, Tahoma, Verdana*
Monospace Courier Courier New
Cursive -- --
Fantasy WingDings, Symbol WingDings, Symbol

* 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

Eric A. Meyer is a member of the CSS&FP Working Group and the author of Cascading Style Sheets: The Definitive Guide.

Return to the JavaScript and CSS DevCenter.

Copyright © 2009 O'Reilly Media, Inc.