Web Fonts 55
I also left out some color and size adjustments to keep the code as read-
able as possible. Here’s the markup I used:
<h1>Great Expectations</h1>
<h2>By Charles Dickens</h2>
<p>My father's family name being <em>Pirrip</em>, and my Christian name
<em>Philip</em>, my infant tongue could make of both names nothing longer or
more explicit than <strong>Pip</strong>. So, I called myself <strong>Pip
</strong>, and came to be called <strong>Pip</strong>.</p>
You can see the output in Figure 5-4.
Figure 5-4: Text using “web-safe” fonts (left) and using different web fonts (right)
In the example on the right, I mixed three fairly distinctive font
families—many designers will probably tell you mixing isn’t a good idea
on a production site, but it works well to illustrate my point. Whatever you
think of my font choices, I hope you’ll at least agree that the text looks
more dynamic and enticing with those choices applied.
Despite the long and winding route we’ve had to take to get a cross-
browser syntax, using @font-face isn’t complicated; you’ll expend some over-
head in the form of extra setup time to declare the font faces and variants
you want to use, but after that you can call them in your font stacks and
style them in exactly the same way as system fonts.
Controlling Font Loading
Web fonts are loaded as external assets and must be downloaded by the
browser before they can be displayed. Before the file has loaded, no font
at all will be visible on the elements the font is to be applied to. You may
then see a slight “flash” that occurs as the font loads and is applied. This is
known as the Flash of Unstyled Text (FoUT).
Many FaaS providers offer ways to work around this problem using con-
figuration files, but if you’re hosting your own fonts, you may want to inves-
tigate the Web Font Loader library (https://github.com/typekit/webfontloader/),
which provides an event system that allows you to control the appearance of
your page dynamically as fonts are loaded.
