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…
