HTML and CSS Reference
In-Depth Information
Test drive the Web Font in
Tony's journal
When you reload “journal.html”, you should see the
<h1>
heading at the top of the page use the Emblema
One. Not bad for just a few lines of CSS!
No
w, the <
h1> hea
ding at
the
to
p of Ton
y's jour
nal page
is
usi
ng font
“Emblem
a One.”
T
TF and
WOFF
font
format
s
do
n't wo
rk in IE
8
and ea
rlier.
If yo
u want t
o
s
upport u
sers wit
h older
IE brows
ers,
you'll
need to
do a bit
more wo
rk with
W
eb Fonts
, and us
e an EO
T font.
However, remember to make sure you only
choose the fonts you really need in your web
page; each extra font takes extra loading
time for your page, so having multiple Web
Fonts in your page will slow down your web
page. If it gets too slow, you might have
frustrated users on your hands!
Q:
You mentioned services to help
me with hosting Web Fonts. Can you say
more?
A:
Sure! FontSquirrel (http://www.
fontsquirrel.com/) is a great place to find
open source, free fonts that you can upload
to your server. Their font kits make it easy to
offer multiple formats of a given font. Google
Web Font Service (http://www.google.com/
webfonts) is a way you can let Google do all
the hard work for managing the fonts and the
CSS for you; in this case, you just link to the
fonts you want on the Google service, and
then use the names in your CSS. Easy!
Q:
The @font-face rule doesn't really
look or act like a CSS rule, does it?
A:
You're right; think of @font-face as
a built-in CSS rule rather than a rule that
acts like a selector. Instead of selecting an
element, @font-face allows you to retrieve
a Web Font, and assign it to a font-family
name. The @ at the beginning is a good clue
this isn't an ordinary CSS rule.
Q:
Are there other built-in CSS rules I
should know about?
A:
There are. Two common built-in rules
you'll see are @import, which allows you to
import other CSS files (rather than a <link>
in your HTML), and @media, which allows
you to create CSS rules that are specific to
certain “media” types, like a printed page
versus a desktop screen versus a mobile
phone. More on @media later.
Q:
Web fonts seem great; are there
any disadvantages to using them?
A:
A few. First, it takes time to retrieve
Web Fonts, and so your page performance
might suffer the first time you have to
retrieve them. Also, there's the pain of
managing the multiple font files. Finally, you
may find mobile and small devices that don't
support them, so make sure you always
allow for alternatives in your design.
Q:
Can I use multiple custom fonts
with @font-face?
A:
Yes. If you're using @font-face to load
the fonts, then for each font you want to use,
make sure the font files are available on your
server, and create a separate @font-face
rule for each one, so you can give each a
unique name.
F
or even
more on
Web Fo
nts,
c
heck ou
t the ap
pendix.
