Head First HTML with CSS

Specifying font families using CSS
Okay, so there are a lot of good fonts out there from several font families. How do
you get them in your pages? Well, you’ve already had a peek at the font-family
property in the last chapter, when you specified a font-family of “sans-serif ” for
the lounge. Here’s a more interesting example:
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
You can specify more than one
font using the font-family
property. Just type the font
names separated by commas.
Check to see if the font
Verdana is available on the
computer and if so, use
it as the font for this
element (in this case, the
element).
Write font names as they
are spelled, including upper-
and lower-case letters.
How font-family specifications work
Here’s how the browser interprets the fonts listed in your font-family specification:
styling with fonts and colors
Always put a generic font family name at the
end, like “serif”, “sans-serif”, “cursive”, or
“monospace”. You’ll see what this does in a sec.
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
If Verdana isn’t
available, then look
for the font Geneva,
and if it is available,
use it for the body.
The font-family property gives you a way to create a list of preferred fonts.
Hopefully most browsers will have one of your first choices, but if not, you can at least
be assured that the browser will provide a generic font from the same family.
Let’s get some fonts into your pages...
Usually your font-family specification contains a
list of alternative fonts, all from the same family.
If Geneva isn’t
available, then look for
the font Arial, and if
it is available, use it
for the body.
Finally, if none of the specific
fonts can be found, just use
whatever the browser considers
its default “sans-serif” font.
You don’t have to specify four alternative fonts; you
can have two, three, etc. In the last chapter we only
used one - the default sans-serif font - although
we don’t recommend that because it doesn’t give you
much control over the fonts you’d like used.
you are here 347