Default embed code
Typekit’s standard embed code is a simple pair of
<script> tags. The first is an external
To find the default embed code for your kit, select the kit name from the kit menu to open the Kit Editor. Then click the "embed code" link at the top right, and copy and paste the embed code near the top of your site’s
<head> tag. (If you're using Typekit with some blogging platforms, you can copy the Kit ID—the seven-character alphanumeric code listed at the bottom of the window —into your blog's settings instead. Read more about using Typekit on your blog.)
This standard embed code takes advantage of the fact that
<script> tags block further rendering of the page to help prevent the FOUT. While the Typekit script is loading, rendering of the page is blocked, so text won’t start to render with fallback fonts. Most browsers do a good job of hiding the FOUT by default, and any remaining issues can be controlled using font events once the script has finished loading and executing.
Most users will find that the default embed code works well for their sites. However, If you need to eliminate any possibility that a problem loading the kit could interfere with loading the rest of the page, you should consider using the advanced embed code instead.
Advanced embed code
The advanced embed code loads the Typekit fonts asynchronously on your site, meaning that further rendering of the page is not blocked while the script is loading. 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 while the fonts load. The downside is that it requires writing custom CSS to hide the flash of unstyled text that can occur while fonts are loading.
To find the advanced embed code for your kit, select the kit name from the kit menu to open the Kit Editor. Then click the "embed code" link at the top right and choose “Show advanced”. Copy and paste the embed code near the top of your site’s