New - Pastie

Language:

## mark a section (Learn more)

From: http://paulirish.com/2009/fighting-the-font-face-fout/ I removed a bunch of old stuff from this article; it was kinda outdated. Here it is: <div class="update">2010.05.26: Part of this is a little out of date. I'd recommend skipping down to <a href="#defeatthefout">Defeat the FOUT entirely</a> and skip this prioritized download thing that follows. I removed a bunch of old stuff from this article; it was kinda outdated. It's now in an HTML comment if you're really curious. Additionally, the new <a href="http://code.google.com/apis/webfonts/docs/webfont_loader.html">google WebFont Loader</a> can make mozilla behave like webkit and vice versa when it comes to FOUT. I'll update this article later on with how, specifically. :)</div> <h4>Let's get the font ASAP</h4> The sooner the better, so let's prioritize getting this font before everything else. We'll set up our @font-face declaration: <pre lang="css"> /* chunk will load immediately in IE at this declaration*/ @font-face { font-family: 'ChunkFive Regular'; src: url('fonts/Chunkfive.eot'); src: local('ChunkFive Regular'), local('ChunkFive-Regular'), url('fonts/Chunkfive.otf') format('opentype'); } /* define a class that uses this font */ .chunk { font-family:'ChunkFive Regular'} </pre> And inside the <code><head></code>, we'll include this: <pre lang="javascript"> (function(className){ // quit early if we're in IE, no need to do any of this. if (/*@cc_on!@*/0) return; var f = document.createElement('fontdl'); f.innerHTML = 'fontdl'; // associate with the @font-face declaration and hide it f.className = className; f.style.cssText = 'position:absolute; visibility:hidden' // it's still off-DOM so it doesn't download yet // document.body doesnt exist yet so we'll add it onto the HTML tag document.documentElement.appendChild(f); // font download initiated Now. // let's clean up after ourselves (opera needs a timeout > 0) setTimeout(function(){f.parentNode && f.parentNode.removeChild(f)},100) })('chunk'); // <== pass in the class here. </pre> <div class="update">2009.10.10: Based on a tip from my colleague <a href="http://blog.amodernfable.com/">Adam McIntyre</a>, we have a more elegant solution than the above javascript. It, along with more fontstack research, is as follows...</div> Rather than creating an element on the fly that uses the font, we do the same with HTML: Adam postulated the we could do the same trick by classing the HTML tag: (e.g. <code><html class="chunk"></code>) <ul> <li>The font-family style won't actually cascade, so no worries about it being inherited by your content</li> <li>This works in Gecko and Opera, but not Webkit</li> </ul> Alternatively, we add an applicable element to the head: <code><b class="chunk" style="position:absolute; visibility:hidden">download please</b></code> <ul><li>Works in webkit, gecko, opera. Waa hoo!</li> <li>Obviously this doesn't validate. FYI, The element will be thrown into the <body> on page load. </li> </ul> <h4>Can I pre-load all the font assets?</h4> So let's say we have more than one @font-face declaration: <pre lang="css"> @font-face { font-family: 'ChunkFive Regular'; src: local('ChunkFive Regular'), url('fonts/Chunkfive.otf') format('opentype'); } @font-face { font-family: 'League Gothic'; src: local('league gothic'), url('fonts/LeagueGothic.otf') format('opentype'); } </pre> If we set a new class that references both new fonts in a single fontstack, and then pass use that class for our above techniques: <ul> <li>Gecko retrieves all webfonts mentioned in the font stack.</li> <li>Opera retrieves all webfonts mentioned in the font stack.</li> <li>IE, as mentioned, retrieves them when they're declared, not used.</li> <li>Webkit retrieves each font mentioned sequentially until it finds a working one. <ul><li>404s and invalid files are considered non-working, of couse.</li> </ul></li></ul> So with some CSS like so: <pre lang="css"> .chunk { font-family:'ChunkFive Regular'} .league { font-family:'League Gothic'} .allfonts { font-family: 'ChunkFive Regular', 'League Gothic'; } </pre> <pre lang="html4strict">  <b class="allfonts" style="position:absolute; visibility:hidden">download please</b>  <b class="chunk" style="position:absolute; visibility:hidden">download please</b> <b class="league" style="position:absolute; visibility:hidden">download please</b> </pre>