HTML and CSS Reference
Test drive the Web Font in
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
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
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
F or even more on Web Fo nts,
c heck ou t the ap pendix.