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 was under the impression that these days, you’re more likely to find 
I’ve been working on a mockup for Theoryville, and I wanted to throw together a server-side script to respond to some simple AJAX requests. My first thought was to do it in PHP, but then I remembered that PHP is the least elegant language in the world. So, I figured, I’ll do it in Ruby! I wrote what I needed, uploaded it to the Apache server, and I was done—except for the minor detail that Apache wasn’t running the code.
.png)