Best Practices for Embedding Typekit
August 21, 2013
We’ve noticed a recent focus on web performance in blog posts, tweets, and support tickets, so we thought it would be a good time to revisit Typekit embed codes. There are two recommended ways to embed Typekit on your web page:
- Basic embed code (default)
- Advanced embed code
The embed codes can be found by launching the Kit Editor and selecting “Embed Code” in the upper right corner. The basic embed code is displayed by default; use the “Show advanced” link to switch to the asynchronous version.
The basic embed code is recommended for most customers. The advanced embed code is for people who wish make their sites more resilient by loading resources asynchronously. This also requires some extra work to avoid the Flash Of Unstyled Text (FOUT) by modifying your CSS.
Default versus Advanced embed code
@font-face rules into your page through a stylesheet (which, depending on your browser, may contain embedded fonts.) If the browser detects a
It is important that you only pick one of these methods. Using both at the same time will degrade the performance of your website. If you are using other font services together with Typekit, we recommended you use the open source Web Font Loader library instead of the Typekit embed code.
Using Typekit with “optimising” server modules and CDNs
If you have any questions about how to embed Typekit on your website, don’t hesitate to contact Typekit support at firstname.lastname@example.org.