Web Fonts 53Let me explain what’s happening here. The first font to be specified is
the EOT () for Internet Explorer 8 and below. This font is in a rule of its
own, as the next rule contains the optional format() hint; this hint is unfa-
miliar to old IE8, and so the whole rule will be ignored. But the EOT font
needs to be included again () to deal with the IE9 compatibility problem.
Next, the WOFF format is defined () for the majority of browsers, followed
by the TTF format (x) for older browsers, including Android 4.3 and below
(remember that browsers will ignore formats they don’t understand and
therefore can’t load).
As the IE9 compatibility problem is really becoming less important,
you can leave out the second line () at your discretion.
For this to work, the major requirement is that your chosen font
be available in three different formats. To make this easier, I strongly
recommend using the @font-face Generator by Font Squirrel (http://www. fontsquirrel.com/fontface/generator/). Simply upload the font file you want
to use and @font-face Generator converts it into all the relevant formats—
as well as generating the CSS you need to use in your pages. This tool is
invaluable. Font Squirrel also has a library of fonts that are ready to use
with @font-face embedding, saving you the task of converting.
noTe For a full explanation of why the IE trick is required and how it works, read h t t p : //
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax/.Licensing Fonts for Web Use
As mentioned previously in “Font Formats” on page 52, many font foundries
expressly forbid embedding their web fonts in your pages using @ font-face.
They forbid this because linked OpenType or TrueType fonts are easy to
locate and download and can then be used illegally in both on- and offline
applications. The WOFF file type was created in response to this; WOFF is a
web-only format and can contain licensing information to help track down
a copyright infringer. Many foundries have already committed to selling
this format, and I hope many more will follow.
In general, the best policy is to check that the font you choose has a
license explicitly allowing you to use it for web embedding; don’t assume
that because a font is free to download, it is free to use online. That said,
many good-quality free fonts that do allow embedding are available online;
some resources are given in Appendix B.
While the licensing situation is in a state of flux, many web font service
providers have created mechanisms to embed fonts legally in your pages.
By adding JavaScript to your pages, the provider is authorized to serve the
font files from their network, so you can call the font families in your stacks.
The method is known as Fonts as a Service (FaaS).