If you want the in-depth story, this is probably the most knowledgeable article on the topic, by Paul Irish:

http://paulirish.com/2009/fighting-the-font-face-fout/

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.

Here is the CSS example from Typekit:

.wf-loading .blog-title,
.wf-loading .post-title {
    /* Hide the blog title and post titles while web fonts are loading */
    visibility: hidden;
}

You should replace the ".blog-title" and ".post-title" parts with your selectors and add the updated CSS to your Appearance → Custom Design → CSS editor.

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).

That script is called the webfont loader:
https://developers.google.com/webfonts/docs/webfont_loader
It adds CSS classes like .wf-loading, .wf-active, and .wf-active, which allows you to define in your stylesheets what font gets applied when.

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:

.wf-active #header #logo .title .site-title, .wf-active #header #logo .title a {
font-family: "john-doe",Palatino,“Palatino Linotype”,"Book Antiqua",Georgia,Times,“Times New Roman”,serif !important;
}

Notice the .wf-active class - that's the issue here. To get the behavior you're looking for, you should remove that class from your custom CSS:

#header #logo .title .site-title, #header #logo .title a {
font-family: "john-doe",Palatino,“Palatino Linotype”,"Book Antiqua",Georgia,Times,“Times New Roman”,serif !important;
}

I hope this helps :)
Manu

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