Two Typekit performance boosts are worth noting. I know a lot of theme shops include Typekit in their themes, and it’s also one of the most popular ways to use custom fonts on custom client work. If you use Typekit in your work, it’s good to know two new things that may help your site’s performance.
First, Typekit is enabling asynchronous font loading, which can be a good win, but you have to opt into it:
From now on, all new kits will asynchronously load fonts. This will significantly improve your website performance. However, it can also cause the browser to render content in a fallback font before your web fonts load. This so-called Flash Of Unstyled Text can be controlled by using the font events provided by Typekit. Using font events, you can choose either to hide your content, or to show fallback fonts while your web fonts are loading.
FOUT was real bad and now it’s less bad. Slow loading pages are the worst, but you’ll want to focus on those font stacks a little more maybe.
Next Typekit has a feature for what they call “Dynamic Web Typography.” It allows Typekit to only provide the characters of a set that are used on the page. For some languages, this can be an absolutely enormous benefit.
Tom Newton describes it well:
Adobe Typekit have done something very clever called Dynamic Subsetting which has potential to become the srcset of font-stacks. It was born out of Typekit adding East Asian font support such asSource Han Sans which has glyph counts ranging from 18,000 for Japanese and 31,000 for Simplified Chinese. There are not only a lot of glyphs but also a lot of weight with sizing ranging from 4.2MB to 8.8MB per font!
If a site is using Source Han Sans for instance it’s not best practice to serve the entire glyph set. When you add an East Asian font family to Typekit it will automatically become a Dynamic Kit (thats the whole kit, not just one typeface). When your Dynamic Kit JavaScript loads in the browser it detects the characters you’re using and requests that only the used characters are sent. For example, say you’re using a typeface to set a homepage h1 to read “Betty’s Buttery Bakery” then instead of the font-file containing all of it’s glyphs, it will only contain B-E-K-R-S-T-U-Y-‘ in a smaller (much faster loading) font file.
It’s clear to see the benefit of this approach when using huge typefaces like Source Han Sans but it’s also useful for latin fonts too.
I heard Tom, who works at Typekit, talk about this on the Shop Talk Show recently and it blew me away.
