New Perspectives On Web Design

By Marko Dugonjić CHAPTER 9

By default, the browser doesn’t have to download a font to render a
Web page, it will use what’s already available there. Our custom Web font
is an override and as such can sometimes render some unwelcome effects,
like the flash of unstyled text (FOUT).
Google and Typekit collaborated to create the Web Font loader^56 , a
JavaScript library that works with most Web font services as well as with
self-hosted fonts. It is very simple to use and, in the case of Typekit, it’s
already built into the standard embeddable snippet. If you are self-hosting or
using another service, the following code should be pasted into the of
the document:

Then you have three classes at your disposal: .wf-loading, .wf-active
and .wf-inactive that are set on the element. The most interesting
class is .wf-loading which is used to control what happens until the Web
font is downloaded and applied to text. Here’s an example:

56 https://developers.google.com/fonts/docs/webfont_loader