Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Different methods for loading TypeKit's embed code.
<?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>
@ericrasch

This comment has been minimized.

Copy link
Owner Author

@ericrasch ericrasch commented Jan 15, 2014

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>
@jimmynotjim

This comment has been minimized.

Copy link

@jimmynotjim jimmynotjim commented Jan 15, 2014

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

@germanny

This comment has been minimized.

Copy link

@germanny germanny commented Jan 15, 2014

Are you putting this in the header or footer?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment