HTML and CSS Reference
In-Depth Information
ADDED BANDWIDTH
We b fo in t s h ave m a ny a d va in t a g e s of v e r i m a g e re p l ac e m e in t i in t e r m s of f fl e x i b i l i t y
and the power you have to control your designs. They can also result in a smaller
file size, depending on your situation. But you really need to think carefully about
using them if, for example, you are only using a single font for a single heading at
the top of your site.
In King Arthur's blog I only used the Genzsch Et Heyse font for the
<h1>
on
each page. The EOT and TTF versions are 66 kb; the WOFF version is 41 kb; and
the SVG version is a whopping 209 kb (although this is only needed by users of
old versions of iOS). Some single font files can range in size from 300 to 400 kb.
And this is made worse by the fact that some browsers erroneously download
more fonts than they need (see the “Browser bugs” section later in this chapter).
This problem will be mitigated as time goes on—as old IE versions die out and
all browsers support WOFF. But it won't go away completely. Some font files will
just be very big, especially when you consider CJK (Chinese, Japanese, Korean)
languages, which can feature literally thousands of characters; such fonts can
weigh in at several megabytes.
NOTE:
If font file size is a problem in your situation, you could create a font
file containing just the characters you need using a program called Fontforge
(
http://fontforge.sourceforge.net).
In addition, a property in the spec called
unicode-range
allows you to specify which characters you want to load from
the font file, making the bandwidth problem even easier to solve. But at
the time of this writing,
unicode-range
was only supported in WebKit, so I
decided not to talk about it in detail.
So determine whether you really need a web font or if you'd be better off with
image replacement, or even a web-safe font, such as Times New Roman. Just
because you can use web fonts doesn't mean you have to!
