Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Specifying Fonts

Problem

You want to set the typeface of text on a web page.

Solution

Use the font-family property:

body {
 font-family: Georgia, Times, "Times New Roman", serif;
}

Discussion

You can specify the fonts you want the browser to render on a web page by writing a comma-delimited list for the value of the font-family property. If the browser can’t find the first font on the list, it tries to find the next font, and so on, until it finds a font.

If the font name contains spaces, enclose the name with single or double quotation marks.

At the end of the list of font choices, you should insert a generic font family. CSS offers five font family values to choose from, as shown in Table 3-1.

Table 3-1. Font family values and examples

Generic font family values

Font examples

serif

Georgia, Times, "Times New Roman", Garamond, "Century Schoolbook"

sans-serif

Verdana, Arial, Helvetica, Trebuchet, Tahoma

monospace

Courier, "MS Courier New", Prestige

cursive

"Lucida Handwriting", "Zapf-Chancery"

fantasy

Comic Sans, Whimsy, Critter, Cottonwood

All web browsers contain a list of fonts that fall into the five families shown in Table 3-1. If a font is neither chosen via a CSS rule nor available on the user’s computer, the browser uses a font from one of these font families.

Problem finding fonts

The most problematic generic font value is fantasy because this value is a catchall for any font that doesn’t fall into the other four categories. Designers rarely use this font because ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required