Skip to content

Instantly share code, notes, and snippets.

@ericrasch
Last active July 4, 2017 03:54
Show Gist options
  • Select an option

  • Save ericrasch/8438436 to your computer and use it in GitHub Desktop.

Select an option

Save ericrasch/8438436 to your computer and use it in GitHub Desktop.
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>
@germanny
Copy link
Copy Markdown

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