Performance improvements to font serving
August 16, 2012
At Typekit, we’re always working on ways to serve web fonts more efficiently and to improve the performance of our service. To that end, we’re excited to announce some changes to our font serving infrastructure that have significantly improved the performance of all kits.
You don’t need to do anything to take advantage of these performance improvements; all existing kits should already be seeing the benefits. Read on to find out what has changed.
Long cache headers for font data
The result of these longer cache times is that font data is loaded significantly faster on average. There are two reasons for this: first, a visitor who returns to your site is much more likely to load the fonts from her browser’s cache, rather than making a request to the network. Second, if the fonts are requested from the network, they are more likely to be available cached at an edge node in our content delivery network rather than requiring a round trip back to the origin server. In both cases, fonts load much faster.
New font serving infrastructure
So what changed about our font serving infrastructure that has allowed us to increase the cache times for these CSS files? To answer that question, we need to understand how kits were previously published, and the changes we’ve made recently.
Previously, a kit was published with its own individual CSS file for each browser. These CSS files have URLs that look like this:
In this URL,
abc1def is the Kit ID and
g is an identifier for the type of fonts contained in the CSS file. When a Typekit user changed the fonts in her kit and republished, the font data in those CSS files would update, but the URL would stay the same. This meant that we had to keep cache times relatively short, so that a cached CSS file with the old fonts would quickly be replaced by the new one. It was a balancing act between speed of updates and the number of times a visitor’s browser had to check for new fonts.
Now, newly published and republished kits no longer use CSS files that are specific to the kit. Instead, the new CSS files have URLs like so:
Improvements for older kits
We’ve also made the same performance improvements for existing kits that haven’t been republished of late. Since old kits will move to the new-style URLs as they are republished, we can safely increase the cache times on those old kits without interfering with development. All kits, regardless of when they were published, now have CSS files that will stay cached for one week.
Future performance work
As always, if you have any questions about any of this, just drop a line to email@example.com.