Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

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.

Pages: 1, 2

Next Pagearrow