Improving your web font performance
We work hard to deliver the best performance by continuously updating and improving our web font service. In the last few years, we’ve added support for asynchronous font loading, language based subsets, HTTP/2, and just last week CSS kits.
But there’s even more you can do on your end to improve performance, which is just one of the topics I get into in the Webfont Handbook — released earlier today with A Book Apart. If you aren’t sure where to begin with your own site, these three optimization tips are a great place to start. I’ll walk through these in a little detail today, but do check out the book for a whole lot more.
1. Review your font usage
While you’re in the kit editor, take the opportunity to take a look at your subsetting options. The “All Characters” subset delivers the entire font to your site and usually results in a large kit size. You can reduce the size of your kit by switching to the Default subset, or by using a language-based subset.
It’s worth pointing out that subsetting can also be very dangerous. If you accidentally remove characters that you actually need they’ll show up in a fallback font. When in doubt, the Default subset with OpenType Features checked is the right choice.
2. Load fonts and kits asynchronously
One downside of loading fonts asynchronously is that you’ll need to manage the flash of unstyled text (FOUT) yourself. Typekit has excellent documentation on font events, and the Webfont Handbook goes into great detail on tricks to minimise FOUT.
3. Preload and preconnect
Web fonts are a critical component of your site’s performance; you want your content to appear as soon as possible and preferably in the correct font. You can help the browser prioritize resources by using preconnect and preload resource hints.
Preconnect is used to tell the browser that you’ll soon connect to a hostname. Once the browser sees the preconnect hint, it opens a connection in the background, so it’s ready to use.
Then by the time the browser comes across the Typekit embed code (you’re using the advanced embed code, right?), it can re-use the connection to Typekit’s font network. Doing this can easily save several seconds.
<link rel="preload" href="https://use.typekit.net/abc1def.js" as="script" crossorigin>
<link rel="preload" href="https://use.typekit.net/abc1def.css" as="style" crossorigin>
The Webfont Handbook is packed with insights that came from several years of looking into and following these issues — not only web font performance, but also licensing, text rendering, CSS syntax, and more. If your work regularly involves type on the web, the Webfont Handbook just might be your new go-to guide.