Changes to web font serving on Typekit
A few weeks ago we made an announcement we didn’t like. A change in how Google Chrome loads stylesheets resulted in a jarring flash of unstyled-then-invisible text on Chrome 50 and above. We apologize for this.
Today we have good news. We have changed how Typekit loads fonts, and have mitigated the distracting flash in Chrome. We’ve also taken the opportunity to squeeze in other performance updates we’ve had in the works for a while, so you should notice speedier font loading regardless of which browser you use.
You may have noticed that with this change we’re also making individual network requests for each font file instead of bundling fonts in a single request. If you’re worried about the performance implications of this change, we have more good news for you.
Before making this change, we set up a new performance monitoring system that sends performance metrics back to us at random intervals. This allowed us to monitor font loading metrics before and after the change.
Our performance metrics show that the new approach results in much faster load times for fonts — as much as 300 milliseconds faster compared with the old method.
We attribute this improvement to a couple of other changes we made at the same time: support for HTTP/2, cross-site caching of fonts, and extended cache times.
HTTP/2 can send multiple requests over the same connection, thereby avoiding the overhead of opening an individual connection for each font. Browser support for HTTP/2 is very good, so it is very likely you’re using a browser that supports HTTP/2 already. For browsers that don’t support HTTP/2, we’ve also moved fonts to a new domain, which lowers the risk of exceeding the maximum number of connections per host and will make font loading speedier there as well.
Under our old approach to font loading, fonts embedded in the stylesheet were specific to a single kit. With individual font files that’s no longer the case, and sites can share the same font files. For example, if you visit two sites that are using the same font (and subset), your browser will download the font file only once because it’ll be cached on your visit to the first site.
We also changed the cache time for font files. Instead of the one week that we used for stylesheets, font files are cached for one year. Both of these changes improve cache hit ratios on our font network and the browser cache.
We have even more performance improvements planned, so keep an eye on this blog.
Please let us know at email@example.com if you have any questions or concerns about this change. We’re happy to help!
Updated August 18: Our initial post made it sound a little like our default embed code will resolve all FOUT across all browsers — we’re sorry to say, this is not quite the case. But you can use font events to manage the FOUT, or change your embed code to use
async:false so our code blocks the loading of the text until fonts are available. (Read more on embed code options.)