How do I keep Web pages using the Google Webfont API from flickering?

On my Web app (http://status.net/), for our new default theme, we're using the Google Webfonts API (http://code.google.com/apis/webfonts/). There are some very nice fonts in the collection, and it definitely gives a better look to our software.

However, when a page loads, we see a flicker or flash. In Webkit browsers, the area where the fonts are used is blank, until the font file is loaded. In Firefox, the whole thing seems to reflow several times.

Are there things we should look out for in the Webfont API? Take care with our fallback font? Is this normal? 开发者_如何学编程

Evan, Olivier had written an article testing different services for fonts. In Opera, I haven't noticed anything. I wonder if you are talking about the FOUC (Flash Of Unstyled Content). Though I do not see an import. Where the fonts are coming from? CSS or JS?

Yes you can, using the Webfont loader. The example given is to reproduce Firefox's behavior on all browsers, which I think is unfortunate (and not what you're looking for), but you can modify that to for instance hide the text before the font's loaded:

.wf-loading p {
    visibility:hidden;
}

PS: Looking forward to seeing the new theme for StatusNet, the current one definitely deserves some usability and design improvements ;)