Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
July 27, 2012
file 59 lines (55 sloc) 1.864 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Typekit async loading pattern: Standard async pattern</title>

    <!-- BEGIN TYPEKIT SNIPPET -->
    <script type="text/javascript">
      (function() {
        var config = {
          kitId: 'rij7fwm'
        };
        var d = false;
        var tk = document.createElement('script');
        tk.src = '//use.typekit.net/' + config.kitId + '.js';
        tk.type = 'text/javascript';
        tk.async = 'true';
        tk.onload = tk.onreadystatechange = function() {
          var rs = this.readyState;
          if (d || rs && rs != 'complete' && rs != 'loaded') return;
          d = true;
          try { Typekit.load(config); } catch (e) {}
        };
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(tk, s);
      })();
    </script>
    <!-- END TYPEKIT SNIPPET -->

    <style type="text/css">
      h1 {
        font-family: "adelle-1", Georgia, serif;
      }
    </style>

  </head>
  <body>
    <h1>Typekit async loading pattern: Standard async pattern</h1>
    <p>
      The standard async pattern for loading the Typekit JS asynchronously.
      Loading asynchronously prevents the Typekit JS download from blocking
      the rendering of your page.
    </p>
    <h2>Recommendations:</h2>
    <ul>
      <li>Place this snippet at the top of the &lt;head&gt; so the download starts as soon as possible</li>
    </ul>
    <h2>Advantages:</h2>
    <ul>
      <li>Loads Typekit fonts asynchronously (doesn't block page rendering while it loads)</li>
    </ul>
    <h2>Disadvantages:</h2>
    <ul>
      <li>More bytes than the standard Typekit snippet</li>
      <li>Causes a flash of unstyled text (FOUT) in all browsers that can't be controlled or hidden</li>
    </ul>
  </body>
</html>
Something went wrong with that request. Please try again.