-
-
Save johanoloflindberg/39128bc18d1ac3e9443a3c253dbf294c to your computer and use it in GitHub Desktop.
Different methods for loading TypeKit's embed code.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment