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="//use.typekit.net/xxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}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, and copy and paste the embed code near the top of your site’s <head> tag. (If you're using Typekit with a blogging platform such as WordPress.com, Posterous, or TypePad, then 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.

<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='//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”. Copy and paste the embed code near the top of your site’s <head> tag.

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.

Still need help? Email Us.

​​​​
support@typekit.com
http://assets01.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