I’m a fan of Typekit. Being able to go beyond the old Arial-Verdana-Times-Georgia paradigm, on any modern browser, without Flash (unlike sIFR), and with selectable text (unlike Cufón), is a dream come true.
One problem, though: It takes a few milliseconds to load up and render those fonts. That’s not so bad in itself; what’s bad is that the browser renders everything in non-Typekit fonts first, creating an annoying flicker every time the page loads as the text gets replaced by fancier fonts.
Fortunately, there’s a fairly easy solution (though not an officially supported one—see below). Just add this to your site body:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <body id="domain-com"> <script type="text/javascript" src="http://use.typekit.com/KIT_ID.js"></script> <script type="text/javascript"> document.getElementById('domain-com').style.opacity = 0; setTimeout("document.getElementById('domain-com').style.opacity = 1", 1000); Typekit.load('KIT_ID', { afterLoad: function(data) { setTimeout("document.getElementById('domain-com').style.opacity = 1", 1); } }); </script> <!-- content goes here --> </body> |
Then substitute your actual domain for domain-com, and (important!) your site’s unique Typekit ID for KIT_ID. You can get this ID by logging in to Typekit, launching the Kit Editor, and clicking the “Embed Code” link; it’s an 8-letter alphanumeric combination.
Here’s a breakdown:
- The
<body>ID on line 1 isn’t just a good selector; it’s good form. The most common convention is to use your domain (with a dash instead of a dot), which makes things easier for the Greasemonkey types. - The script include on line 2 brings in the Typekit description of your site’s kit. You can move this line up to your
<head>section if you want. - Line 4 makes your entire site disappear. Because this is at the top of your body, nothing is going to get rendered. It’s important that this line be here, rather than in another file or even at the foot of your body.
- The call to
Typekit.loaddoes the actual loading of the fonts, and theafterLoadcallback will be executed right after that happens. That’s when we want to make the body opaque again, right? Well, not quite. It seems that there’s a small delay between the callback and text refresh. Fortunately, usingsetTimeoutto add a tiny delay (1ms) seems to eliminate this, finally ridding us of the dreaded flicker.
Caveat: The afterLoad event is currently considered experimental. An official solution for avoiding flicker is likely to be added in the future.
I had a grotesquely familiar experience in an econ class today: The prof drew up a simple example of a simple concept, yet no one—myself included—understood it. Why? Multiple inconsistencies. A variable name meant one thing in the premises, and something else in the conclusion; a vector was used interchangeably with its distance; the matrix dimensions didn’t match up. Individually, each of these small errors could have been caught and corrected. But taken as a whole, they destroyed every trace of coherence. As a result, half the lecture was spent with the frazzled professor trying to clarify things, only to confuse the audience further, to the point that students were yelling, “Enough! Forget it! Let’s move on!” These are PhD-level students at one of the top econ programs in the world. Yet the situation was so agonizing that it drove them to pandemonium.
