Troubleshooting Fonts

For both the font tag and the font-family attribute to work properly, the visitor's computer must have the font that you specify. It doesn't matter if your computer has the font. The visitor's computer is the one that matters.

So, how do you know which fonts are on your visitor's computer? The short answer is, you don't. But don't let that stop you from making some educated guesses. All typical personal computers come with standard fonts. The typefaces in Table 47.1 are almost always safe choices. See also Figure 47.1.

Table 47.1. Safe Typefaces for Web Pages

WINDOWS FONT	MACINTOSH EQUIVALENT	CATEGORY
Times New Roman	Times	Serif
Arial	Helvetica	Sans serif
Georgia	Times	Serif
Verdana	Geneva	Sans serif
Courier New	Courier	Monospaced

Figure 47.1. A serif font has decorations on the ends of the letters, while a sans serif font doesn't. In a monospaced font, all the letters use the same spacing, typewriter-style.

To minimize your risk further, you may specify a range of typeface preferences in the font tag or font-family CSS attribute. Simply give your preferences in order, and separate font names with commas:

 <font face="Arial, Helvetica, sans-serif"> 

GEEKSPEAK

A sans serif typeface such as Arial doesn't have little decorations on the ends of the letters. A serif typeface such as Times New Roman does. A monospace typeface such as Courier New displays typewriter-style text, where all the characters and symbols have the same amount of spacing between them.

or:

 body {   font-family: Arial, Helvetica, sans-serif; } 

In these cases, the browser first tries to render the text in Arial. If the visitor's computer doesn't have Arial, it goes to Helvetica. If the browser strikes out there, too, it renders the text in its default sans serif font, whatever that font happens to be.

TIP

A smart list of font preferences goes like this: Begin with the Windows font, follow with the Mac equivalent, and end with the generic font category: serif, sans-serif, or monospace.

If you want to use a more exotic typeface on your page, list that font as your first preference, but follow it with one of the safe fonts from Table 47.1, just in case.

TIP

At the end of a list of font preferences, always include serif, sans-serif, or mono, depending on what kind of font you'd like to display. These three generic fonts don't stand for any one specific typeface. Rather, they correspond to the visitor's default serif, sans serif, and monospaced fonts, whatever these fonts happen to be.

Invoking the generic fonts is a failsafe choice. If all else goes wrong with your selections, at least you can guarantee that the broad category of the typeface is the same.