#152: Font Loading with Zach Leatherman

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

Time for another pairing screencast! This time I have Zach Leatherman on, from Filament Group. Zach has done a lot of research, writing, and speaking about web font loading the past few years. He’s got a comprehensive guide on it!

There are some problems with the default way that custom fonts are loaded. As in, just linking up a font in some CSS through @font-face. Even the way Google Fonts provides you to use their fonts Zach calls an anti-pattern (ultimately it’s just vanilla @font-face). Different browsers do different things with @font-face. For example, some versions of Safari make type set in a custom font invisible until the font loads, but has no timeout, so if the font fails for any reason, you could be in the ultimate worst-case scenario: forever-invisible text on the site.

You don’t have a heck of a lot of control over how @font-face fonts load, unless you take matters into your own hands. That means things like: inlining the font, subsetting the font (either with a “critical” set of glyphs, or at least reducing glyphs to the language in use), using font loaders to determine when the fonts load and altering classes to use them. That last one is particularly interesting. When exerting control over font loading, you not only have to deal with when/how the browser loads the CSS that contains the @font-face, but also when/how the browser comes across text elements that are told to use those fonts. Fonts that aren’t used aren’t downloaded. So sometimes the procedure is to force them to download, wait for them to download, then apply classes to actually use them.

Some tools we looked at:

  • Firefox DevTools was better for looking at fonts in use
  • Subsetting fonts can be done in the Font Squirrel generator or Font Prep.
  • What glyphs do you subset? Test what you need at certain URLs with Glyphhanger.
  • How do you tell when the browser is using faux bold/italic? faux-pas.