HTML and CSS Reference
In-Depth Information
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:
Usu ally, your font-family specific ation contains a
list of alternative fonts, all from the same family.
body {
font-family: Verdana, Geneva, Arial, sans-serif;
Write font names as they
are spelled, including upper-
and lowercase letters.
Alw ays put a generi c font f amily na me at t he
end , like “se rif”, “sa ns-serif ”, “curs ive”, or
“mon ospace”. You'll s ee what this doe s in a se c.
How font-family specifications work
Here's how the browser interprets the fonts listed in your font-family specification:
Check to see if t he font
Verdana is availa ble on th e
user's co mputer and if so ,
use it as the fon t for th is
element (in this case, the
<body> e lement) .
If Verdana isn't
available, then look
for the font Geneva,
and if it is available,
use it for the body.
body {
font-family: Verdana, Geneva, Arial, sans-serif;
Yo u don't ha ve to speci fy four al ternative f onts; you
ca n have two , three, et c. In the last chapte r, we only
us ed one—th e default sans-serif font—alth ough we
do n't recomm end that because it doesn't gi ve you
mu ch contro l over the fonts you' d like used .
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…
Search WWH ::

Custom Search