New embed code for asynchronous font loading
As part of a series of performance improvements, we’re making some changes to our embed code. By default, our embed code blocks rendering of the page while your fonts are loading. This negatively impacts the performance of your site because the browser needs to wait until the fonts have loaded before it can start rendering the page.
Today we’re changing that. 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.
The new embed code is similar to the old one. You may notice that the
async option which enables asynchronous font loading is set to
true by default. If you prefer to use the blocking behavior, remove the async option or set it to
false. You can read more about the other configuration options for the embed code in our help section.
This change will not affect any existing kits. If you’re using the default blocking behavior, you can continue to do so. On the other hand, if you want to use the performance improvements that come from loading fonts asynchronously, you can grab the new embed code from the kit editor, or modify your existing one to include the async option.
Keep an eye on this blog, as we’ll be announcing more performance optimizations soon. As always, feel free to email us at email@example.com with any questions or comments.