Keep default font from showing before TypeKit font

I had to go to TypeKit to get the font I wanted for my header/logo. However, the default font still displays for a second before the TypeKit font kicks in and covers/replaces it. Is there any way to keep the default font from showing? It spoils the presentation by announcing "Hey, look how I'm changing this font!"

I tried changing it to white, but that, of course, made the TypeKit font white.

The phenomenon you see is what designers like to call the FOUT - "Flash of Unstyled Content". It's a behavior that is browser dependent.

Until recently, it was mostly seen in Firefox, which was immediately displaying text with the fallback font, then replacing it when the webfont has loaded.

Another behavior has been applied by Chrome, Safari and IE, which display a blank space until the font has loaded. To prevent end-user frustration on slow networks, browsers have also implemented a default 3-second timeout: if the font never loads, the fallback gets applied.

Many designers wanted a consistent behavior across all browsers, so the Google Webfonts team together with Typekit have created a javascript solution, that allows to tell the browser how to behave (show the default immediately, or wait until the webfont loads).

Some time after that, Firefox listened to webdesigners and adopted the same behavior as Chrome etc. So this javascript workaround isn't needed, unless you want users to see the FOUT (perhaps for accessibility reasons).

However, if you have a look at the styles applied to your site header, you will notice that that font is applied with the following rules:

I checked in with our Custom Fonts developers, and here's what I found out. We do adjust for FOUT if you are using the build in tools at http://en.support.wordpress.com/custom-design/custom-fonts/ but if you are using the advanced mode for fonts with Typekit, you need to make some adjustments in your custom CSS directly.

Great explanation from squarepixel about the details on this! I'll add to it just a little: instead of removing the wf-active class (or adding additional rules to try to override them as squarepixel suggested), you can use the wf-loading class to simply hide the unstyled font so that it never loads. This is the recommended option shown at Typekit's site here:http://blog.typekit.com/2010/10/29/font-events-controlling-the-fout/

You need to copy their example CSS and adjust it based on the selectors you have chosen in your Typekit font kit. Doing it this way will also prevent you from having to change your custom CSS should you decide to change fonts again on the Typekit site. If you change selectors though, you'll still need to update the custom CSS to match.

My son's a developer so I've seen behind the scenes what a struggle it is to make code work properly with multiple versions of half a dozen different browsers and at least as many different kinds of devices. My hat's off to those of you who can make it all work!