New, improved embed code
July 19, 2012
We’re constantly working behind the scenes to improve performance across our font network. Most of these changes are, by design, invisible to you or your visitors. But today we’re releasing some small but meaningful changes to our recommended embed code that will make font serving even better.
To benefit from these improvements, you need only update your sites to use the new embed code. Note that doing so is completely optional: all sites using the prior embed code will continue to work. But the new embed code offers a few performance improvements which we think you’ll appreciate.
Protocol relative URLs
Without further ado, here’s what the new embed code looks like:
The second change is that we’ve made all kits available at use.typekit.net in addition to use.typekit.com. These hostnames run on the same infrastructure and behave identically. The only difference is that the new domain does not have any cookies set on it, as recommended by both Google and Yahoo performance best practices.
Official asynchronous embed code
Previously on this blog, Sean discussed a variety of approaches to loading Typekit fonts asynchronously. The upside of asynchronous loading is that, if a request for a kit is slow for any reason, it won’t block the rendering of the rest of the page. The downside is that it requires writing custom CSS to hide the flash of unstyled text that can occur while fonts are loading. That said, these patterns have been working very well for sites that need this capability, so we’re now including an option to generate the asynchronous embed code directly in the kit editor.
Using the new embed code
You can find the new recommended embed code in the Kit Editor. There is no need to republish your kits to use the new embed code; simply copy and paste the new embed code into your sites.
As always, if you have any questions about this, please reach out to firstname.lastname@example.org and we’ll get back to you right away.