Site Check: How to overcome "FOUC" due to cufon font replacement?

In this site, I’m trying to minimize the “flash of unstyled content” that appears just before the cufon scripts have kicked in to do the font replacements on the H level elements on the page.

The use of the method is supposed to help with this but its apparently not working or not configured correctly.

Any help or suggestions are much appreciated. I’m open to alternative approaches or different ideas.


Generally speaking webfonts in all their incarnations are disastrously prone to FOUC, and there’s little you can do about that… The nature of the beast.

My question though is “good lord why are you still using Cufon?” – NOT that Cufon was EVER worth trying to use in the first place given it’s reliance upon scripting, massive bloat and over the top FOUC. It was a bad idea when it was introduced, and has no place on websites now that @font-face is real world deployable.

My advice would be to convert the fonts to ACTUAL web formats using a service like Font Squirrel, and use that instead of Cufon… especially since it not only works in all modern browsers, it works all the way back to IE 5.01 without plugins.

Another way to deal with it is to not use really large fonts – the larger the font file the longer the delay before it finishes loading.

Thanks for the feedback. I’ve actually already changed it over t0 google web fonts and no more fouc (fingers crossed)

You may find google fonts as unreliable. I don’t trust it as I’ve seen several cases where it’s just as bad as cufon. The very principle of how it works (browser sniffing server-side) is just asking for it to break somewhere/sometime.

If so, I trust Google to work it out :wink: