When loading web-fonts, we often see a brief un-styled moment before the browser applies the actual font. Gladly Typekit and also Google Web Fonts provide an option around that.
Both are using WebFont Loaders to help handle those brief moments.
TypeKit Webfont Loader Example
|
1 2 3 4 5 6 7 8 9 |
(function(d) { var config = { kitId: '***' , // Your Kit ID scriptTimeout: 3000 }, h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) })(document); |
This adds a class name to the <html> element during loading
|
1 2 3 |
<html class="wf-loading"> |
This is removed when loading is done. This allows us to hide content until all fonts are loaded.
Webfonts Loading
|
1 2 3 4 5 |
.wf-loading * { opacity: 0; } |
This also adds classes once the webfonts have been loaded, which allows us to add some transitions to reveal the content again.
Webfonts Loaded
|
1 2 3 4 5 6 7 8 9 |
.wf-active *, .wf-inactive * { -webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -o-transition: opacity 1s ease-out; transition: opacity 1s ease-out; } |
One last thing. You should add the webfont loader early in your content, so that it can do its magic before anything else is being loaded.
