Different methods for loading TypeKit's embed code.

TypeKit embed code.php

<?php 
/**
 * TypeKit's default embed code.
 * Source: http://help.typekit.com/customer/portal/articles/649336-embed-code
 * Avg. Load Time: 191ms; 198ms; 265ms
 */
?>
<script type="text/javascript" src="//use.typekit.net/xxxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>


<?php 
/**
 * TypeKit's advanced [asynchronous] embed code.
 * Source: http://help.typekit.com/customer/portal/articles/649336-embed-code
 * Avg. Load Time: 296ms; 218ms; 298ms
 */
?>
<script type="text/javascript">
  (function() {
    var config = {
      kitId: 'xxxxxxx',
      scriptTimeout: 3000
    };
    var h=document.getElementsByTagName("html")[0];h.className+=" wf-loading";var t=setTimeout(function(){h.className=h.className.replace(/(\s|^)wf-loading(\s|$)/g," ");h.className+=" wf-inactive"},config.scriptTimeout);var tk=document.createElement("script"),d=false;tk.src='//use.typekit.net/'+config.kitId+'.js';tk.type="text/javascript";tk.async="true";tk.onload=tk.onreadystatechange=function(){var a=this.readyState;if(d||a&&a!="complete"&&a!="loaded")return;d=true;clearTimeout(t);try{Typekit.load(config)}catch(b){}};var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(tk,s)
  })();
</script>


<?php 
/**
 * Delayed loading of typekit scripts vs Flicker-free loading
 * Source: https://www.farbeyondcode.com/Delayed-loading-of-typekit-scripts-vs-Flicker-free-loading-5-2304.html
 * Avg. Load Time: 66ms; 91ms; 113ms
 */
?>
<script type="text/javascript">
    /* <![CDATA[ */ 
    TypekitConfig = {
        kitId: 'xxxxxxx'
    };
    (function() {
        var tk = document.createElement('script');
        tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';
        tk.type = 'text/javascript';
        tk.async = 'true';
        tk.onload = tk.onreadystatechange = function() {
            var rs = this.readyState;
            if (rs && rs != 'complete' && rs != 'loaded') return;
            try { Typekit.load(TypekitConfig); } catch (e) {}
        };
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(tk, s);
    })(); 
    /* ]]> */
</script>


<?php 
/**
 * Delayed Loading Typekit asynchronously with yepnope.js
 * Source: http://icelab.com.au/articles/loading-typekit-asynchronously-with-yepnopejs/
 */
?>
<script>
  Modernizr.load([{
    // Does the browser support @font-face?
    test: Modernizr.fontface, // Should return a boolean
    // Yep! Get the fonts
    yep : 'http://use.typekit.com/xxxxxxx.js',
    complete: function() {
      // Load complete! Tell Typekit to start up
      try { Typekit.load(); } catch(e) {};
      // Profit!
    }
  }]);
</script>

If there was any question, the best choice for now is...

<?php 
/**
 * Delayed loading of typekit scripts vs Flicker-free loading
 * Source: https://www.farbeyondcode.com/Delayed-loading-of-typekit-scripts-vs-Flicker-free-loading-5-2304.html
 * Avg. Load Time: 66ms; 91ms; 113ms
 */
?>
<script type="text/javascript">
    TypekitConfig = {
        kitId: 'xxxxxxx'
    };
    (function() {
        var tk = document.createElement('script');
        tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';
        tk.type = 'text/javascript';
        tk.async = 'true';
        tk.onload = tk.onreadystatechange = function() {
            var rs = this.readyState;
            if (rs && rs != 'complete' && rs != 'loaded') return;
            try { Typekit.load(TypekitConfig); } catch (e) {}
        };
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(tk, s);
    })(); 
</script>

+1. Just a note, if the design calls for a super condensed font face, make sure to make use of the wf-loading class to reset the font-size so that text doesn't end up overrunning it's container or screwing up layouts.

Are you putting this in the header or footer?