Stopping the Cufon Flash of Unstyled Text / FOUC

FOUC is short for Flash of Unstyled Content. If you use Cufon (as I am for post titles), you may have the problem that I initially had where the text first shows up in the standard Browser rendered font, then quickly changes to the Cufon rendered font. The Cufon documentation says you can fix this using Cufon.now(), but that didn't work for me.

So the solution I'm using now is to initially hide the text, then show it when Cufon is ready to render it. This is accomplished by styling the cufon-loading class as follows:

.cufon-loading h1 {
 visibility: hidden !important;
}

This momentarily produces a blank space where the text should be, then Cufon renders the text into that space. That's not perfect, but it's a lot better than having a flash of unstyled text or having your content jump around as Cufon renders.

Note that visibility: hidden has an advantage over other approaches, such as display: none, since visibility: hidden renders the blank area where the text will go. Thus, you don't get content jumping around when Cufon renders.

The cufon-loading approach is mentioned on the Cufon site but you have to look for it. See the section "special cases" here.