The embed code is how fonts from Typekit are loaded into your website in the browser. There are several versions of the embed code: default CSS, @import CSS, and advanced JavaScript.

The default and @import embed codes use only CSS for the font loading (no JavaScript), which means they can be used not only in webpages, but in HTML email or newsletters, Google AMP, and more. The advanced embed code uses JavaScript to load the fonts asynchronously, allow custom callbacks, and provide native font events for managing any flash of unstyled content.

JavaScript font loading is also required for dynamic kits, which are used for East Asian web font serving.

The embed code for any particular kit can be found by launching the kit editor and clicking the "embed code" link at the top right.

Default & @import embed codes: CSS-only font loading

Typekit’s default embed code is a single <link> tag which loads the kit CSS from the Typekit font network (use.typekit.net).

<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">

To find the default embed code for your kit, open the kit editor and click the "embed code" link at the top right. 

Default CSS embed code

Typekit also provides an @import embed code, which you can use directly in stylesheets. Add it between the style tags in your CSS.

<style>
  @import url("https://use.typekit.net/xxxxxxx.css");
</style>
embed-2

To find the @import embed code for your kit, open the kit editor and click the "embed code" link at the top right, then choose the @import tab. 

Using either of the CSS embed code options means that the rest of the page may not display until after the Typekit CSS has finished loading. The behavior varies between browsers, depending on how each handles external CSS files.

For asynchronous font loading that does not block the rest of the page:

Advanced embed code: JavaScript font loading

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 uses JavaScript to load all of the files from Typekit asynchronously into your site for optimal performance.

The advanced embed code is also required for dynamic kits, which are used for East Asian web font serving.

<script>
  (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='https://use.typekit.net/'+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)
  })(document);
</script>

To find the advanced embed code for your kit, open the kit editor and click the "embed code" link at the top right, then choose the Advanced tab. (Dynamic kits will only show the advanced JavaScript option.)

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.

The advanced embed code can be further customized by passing a configuration object to the Typekit.load method; see the Typekit JavaScript API section for details.

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. 

Note:

JavaScript font events are not available for dynamic kits; use CSS font events instead.

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.

 

Changing the embed code in a website

If you have a website that is already using Typekit via the JavaScript embed code, you can switch to a CSS kit by replacing the Typekit <script> tags in your code with the HTML <link> embed code or the CSS @import embed code.

Similarly, the CSS embed code in a website can be replaced by the Advanced embed code to take advantage of the JavaScript options.

The kit does not need to be republished. Any version of the embed code is available to you at all times.
 

Using legacy embed code in a website

Although Typekit will occasionally change the embed code options in the kit editor as we make improvements to font serving, all previous versions of the embed codes will continue to work.  

If you are using a legacy embed code in your website, you are not required to change it. However, many websites will benefit from performance improvements by updating to a newer, recommended version.

Previous versions of the embed code include the default JavaScript embed code, which loads the Typekit CSS file asynchronously:

<script src="https://use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

and a protocol-relative version of the default JavaScript embed code:

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

(Even if your site is using the protocol-relative embed code, Typekit font serving now uses HTTPS for all requests.)

Using multiple kits in a website

We do not recommend adding the embed code for more than one kit to the same webpage. It's almost always more efficient to use a single kit than multiple kits for several reasons:

  • Each kit loaded on the same page must load its own copy of the emed code, 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