It is possible to minimize the impact of web font loading with some judicious optimization.
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.
families: ['Source Sans Pro:400']
You can find a more in depth discussion on this topic on Lockdown Design’s blog.
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.
families: ['Source Sans Pro:400:latin']
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.Posted in: WordPress