Webfonts are a boon to theme developers. They opens up a vast landscape of potential typefaces — a far cry from the bad old days when there was only a handful of web safe fonts to choose from. But webfonts have drawbacks: most significantly, page weight inflation. For many themes, fonts come second only to images in size. On top of that, because fonts from Google Fonts, Typekit, and other web font services are loaded by a Javascript snippet, they can block rendering of the page for an indeterminate amount of time.
It is possible to minimize the impact of web font loading with some judicious optimization.
Asynchronous Loading
Before we discuss any optimizations, I’ll introduce you to a handy little tool called the Web Font Loader. It’s a Javascript utility developed primarily by Adobe and several other font providers and it includes several useful font optimization features. We’ll be using it for a couple of our optimizations.
When web fonts load, they block the rendering of the rest of the page — if the font takes a few seconds to load, the result is an undesirable delay before the user sees anything useful.
An alternative to this blocking behavior is asynchronous loading. When loading a file asynchronously, rendering isn’t blocked, and the font will be loaded whenever it becomes available. A downside of loading asynchronously is the Flash Of Unstyled Text that visitors may see while the font loads, but there are ways to minimize the impact of FOUT.
Typekit users don’t need to do anything to get async fonts other than ensure they are using the latest version of the Typekit embed code. Typescript fonts now load asynchronously by default.
Google Fonts can be made to load asynchronously with the Web Font Loader. To load Google Fonts Asynchronously, include the following in your theme’s head section, with appropriate changes for your font stack.
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Source Sans Pro:400']
}
});
</script>
You can find a more in depth discussion on this topic on Lockdown Design’s blog.
Subsetting
Subsetting is the process of only loading the typefaces that you need. For example, if you’re only likely to need western characters, there’s no need to download font files for non-western languages. The same goes for different font weights. If you don’t need the condensed version of a font, don’t include it in the download. It’s possible to take a significant bite out of download times if you’re careful what you download.
If you use Typekit fonts in your WordPress theme, you can subset when building the kit — untick any typeface you don’t need.
For Google Fonts, Web Font Loader comes to the rescue once again. To subset a font using Web Font Loader, you’d modify the embed code like so.
WebFont.load({
google: {
families: ['Source Sans Pro:400:latin']
}
});
</script>
Caching In Local Storage
Ideally, users would only have to download typefaces once, because on subsequent visits they’d be loaded from the browser’s cache. In practice, browser caching is hit and miss, especially on mobile devices.
Smashing Magazine developed a method for leveraging localStorage to cache typefaces. There are a few caveats to this approach, the most important of which is the requirement that the font files exist on your server, which can be an expensive proposition.
If you’re interested in pursuing this method of optimization, Smashing Magazine published a detailed write-up of the process.
