Default embed code

Typekit’s standard embed code is a simple pair of <script> tags. The first is an external <script> tag that loads the kit JavaScript from our content delivery network (or CDN). The second <script> tag is a piece of inline JavaScript that actually kicks off font loading using the kit.

<script src=""></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

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. You’ll be given the JavaScript embed code for your specific kit. The kit editor will indicate where to add the embed code to your site: dynamic kits need the code at the end of the page before the closing </body> tag for optimal performance, while other kits go in the site’s <head> tag.

Instructions for using the JavaScript embed code

The standard embed loads the Typekit CSS file asynchronously into your site (async: true), so that the page is not blocked while the file 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.

Adding the CSS to the page asynchronously can introduce a flash of unstyled text (FOUT) text while fonts are loading, though. 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.

If you would prefer to have the page wait for the fonts from Typekit to be available, you can use the <script> tag to block the page render and prevent any chance of FOUT; remove the {async: true} option or set it to false.

Advanced embed code

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. The advanced embed code loads both the Typekit CSS and JavaScript files asynchronously into your site, for optimal performance.

  (function(d) {
    var config = {
      kitId: 'xxxxxxx',
      scriptTimeout: 3000,
      async: true
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src=''+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)

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”.

Where to find the advanced embed code in the kit editor

By default, the advanced embed code will attempt to load the kit JavaScript for 3000 milliseconds (3 seconds) before adding the "wf-inactive" classname to the page. This timeout can be configured by changing the value of the "scriptTimeout" property in the config block.

Typekit JavaScript API

Note: JavaScript font events are not yet supported in dynamic kits; use CSS font events instead.

The Typekit kit JavaScript exposes a global variable Typekit with one public method load. Calling "Typekit.load" without any arguments will trigger font loading.


You can also pass a configuration object to Typekit.load.

      // configuration…

The configuration object contains two types of properties: font event callbacks and configuration options. The following callbacks can be specified:

  • loading - This callback is triggered when all fonts have been requested.
  • active - This callback is triggered when the fonts have rendered.
  • inactive - This callback is triggered when the browser does not support linked fonts *or* if none of the fonts could be loaded.
  • fontloading - This callback is triggered once for each font that's loaded. The callback is called with the family name as the first argument and font variation description as the second argument.
  • fontactive - This callback is triggered once for each font that renders. The callback is called with the family name as the first argument and font variation description as the second argument.
  • fontinactive - This callback is triggered if the font can't be loaded. The callback is called with the family name as the first argument and font variation description as the second argument.

The following options are supported:

  • async: Enables asynchronous CSS loading. Defaults to true.
  • classes: Disables font event classes set on the HTML element if set to false. Defaults to true.
  • events: Disables font event callbacks if set to false. Defaults to true.
  • timeout: The number of milliseconds before font loading times out. Defaults to 3000 (3 seconds).

If both events and classes are set to false, the Typekit JavaScript only inserts the CSS link to the fonts and does not perform any font watching.


Dynamic kits and East Asian web font serving

Typekit developed dynamic kits to accommodate East Asian font serving at Typekit. The large size of East Asian fonts — well over 10,000 glyphs in most cases — otherwise makes it unrealistic to load these fonts on a website without significantly impacting the load time.

When you add an East Asian font family to your kit, it will automatically become what we call a dynamic kit. In a dynamic kit, you’ll have a new Character Set option in the kit editor called Dynamic Subsetting, which is automatically switched on.

A dynamic kit that includes Source Han Sans Japanese

The dynamic kit looks for any change to the DOM — such as a news feed or a comments section — and then requests any new characters that need to be added to the subset. We call this dynamic augmentation, and it’ll happen automatically for any of the font families in your kit that use the dynamic subsetting option.

This way, instead of downloading an entirely new font, we can now simply request the additional glyphs and perform the update right in your browser.

Because the dynamic kit needs to parse the page to know which glyphs to load, the JavaScript should go right before the closing </body> tag for optimal performance.

Instructions for using the JavaScript embed code

(If you are converting an existing language-subsetted kit to a dynamic kit, you will likely need to move the embed code in your website from the <head> to the end of the page.)

For more details on how to use these new capabilities, see the help articles on Adding fonts to your website and Language support & subsetting.

For more details on browser support, see our updated Browser and OS support page.

Using multiple kits on your site

While it’s often possible to add more than one kit to a webpage, we do not recommend it. It's almost always more efficient to use a single kit than multiple kits on the same page, for several reasons:

  • Each kit loaded on the same page must load its own copy of the JavaScript, which is mostly redundant.
  • Each kit also makes separate requests for fonts, which increases the number of HTTP requests and further slows loading.
  • A single kit can be cached across all pages on your site after the first load.

It is not possible to load both a dynamically-subsetted kit and a language-subsetted kit in the same webpage. The dynamically-subsetted kit takes precedence, and the fonts from any other kit will not be available to your site. If you would like to include a combination of dynamic and language-subsetted fonts on your site, they must be loaded from the same kit.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy