The CSS Font-Family Property and the Use of Font Stacks

Typographic design is a critically important piece of a successful website design. Creating sites with text that is easy to read and which looks great is the goal of every web design professional. To achieve this, you will need to be able to set the specific fonts that you wish to use on your web pages. To specify the typeface or font family on your Web documents, you will use the font-family style property in your CSS.

The most uncomplicated font-family style that you could use would include just one font family:

p {
 font-family: Arial;
}

If you applied this style to a page, all of the paragraphs would be displayed in the "Arial" font family. This is great and since "Arial" is what is known as a "web-safe font," which means most (if not all) computers would have it installed, you can rest easy knowing that your page will display in the intended font.

So what happens if the font you select cannot be found? For example, if you do not use a "web-safe font" on a page, what does the user agent do if they don't have that font? They make a substitution.

This can result in some amusing-looking pages. I once went to a page where my computer displayed it entirely in "Wingdings" (an icon-set) because my computer didn't have the font that the developer had specified, and my browser made an abysmal choice in what font it would use as a replacement. The page was entirely unreadable for me! This is where a font stack comes into play.

Separate Multiple Font Families with a Comma in a Font Stack

A "font stack" is a list of fonts that you want your page to use. You would put your font choices in order of your preference and separate each with a comma. If the browser doesn't have the first font family on the list, it will try the second and then the third and so on until it finds one it has on the system.

font-family: Pussycat, Algerian, Broadway;

In the above example, the browser will first look for the "Pussycat" font, then "Algerian" then "Broadway" if none of the other fonts were found. This gives you more of a chance that at least one of your chosen fonts will be used. It is not perfect, which is why we have yet more we can add to our font stack (read on!).

Use Generic Fonts Last

So you can create a font stack with a list of fonts and still have none of which the browser can find. You don't want your page to show up unreadable if the browser makes a poor substitution choice. Luckily CSS has a solution for this too, and it's called generic fonts.

You should always end your font list (even if it's a list of one family or only web-safe fonts) with a generic font. There are five that you can use:

• Cursive
• Fantasy
• Monospace
• Sans-serif
• Serif

The two above examples might be changed to:

font-family: Arial, sans-serif;

or

font-family: Pussycat, Algerian, Broadway, fantasy;

Some Font Family Names are Two or More Words

If the font family you want to use is more than one word, then you should surround it with double-quote marks. While some browsers can read font families without quotation marks, there may be problems if the whitespace is condensed or ignored.

font-family: "Times New Roman", serif;

In this example, you can see that the font name "Times New Roman," which is multi-word, is encased in quotes. This tells the browser that all three of these words are part of that font name, as opposed to three different fonts all with one-word names.