Contact Us​​ | Status Blog
Help Center
Main Web Design and Development › Embed Code

Embed Code

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 type="text/javascript" src="https://use.typekit.net/xxxxxx.js"></script>
<script type="text/javascript">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.

Screenshot of instructions for using the 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.

<script type="text/javascript">
  (function(d) {
    var config = {
      kitId: 'xxxxxxx',
      scriptTimeout: 3000
    },
    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='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadyst
atechange=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)
  })(document);
</script>

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

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

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

Typekit.load()

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

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.

Still need help? Email Us.

​​​​
support@typekit.com
http://assets3.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete