Comments on: Fix Cufon Flash of Unstyled Content

By: Appel

Appel — Wed, 24 Mar 2010 11:27:26 +0000

Just my 0.02$, this worked for me, cross browser: http://piestar.net/2009/04/27/stopping-the-cufon-fouc-in-ie/

By: Daniel

Daniel — Mon, 22 Mar 2010 17:39:35 +0000

It worked once I’ve made changes to my css

- h1,h2,h3,h4 {color:transparent;}

then added the ‘ Cufon.replace(‘h1, h2, h3, h4′); ‘ at the beginning (top of body)

and right at the bottom of the body, called in another css/text to bring in the colors back to the font

- h1,h2,h3,h4 {color:#000;}

It worked fine for me without the flash now.

By: Daniel

Daniel — Mon, 22 Mar 2010 17:16:12 +0000

I’m gonna try this out for this blog (it’s running with an Arial 38px for the header—and it sure looks terrible when it flickered for that second).

Clarifying again, I should be calling Cufon at the end of the site eg: after footer instead of getting it up before the ?

By: Greg Bowen

Greg Bowen — Tue, 09 Mar 2010 00:45:26 +0000

I had trouble getting this to work. What I did was set the elements to display:none in the css and use jquery to show the elements that I wanted.

$(document).ready(function() {
$(“h1″).show();
$(“h2″).show();
});

(in the head)

By: koumei

koumei — Fri, 18 Dec 2009 00:17:55 +0000

Anyway it is a good trick to solve FOUC!

By: koumei

koumei — Fri, 18 Dec 2009 00:16:47 +0000

I think better use jquery to apply the css to the elements. coz cufon is using javascript to replace the font, if javascript is not working on the machine, your element will never be seen on the screen.

By: Mike

Mike — Thu, 17 Dec 2009 15:03:20 +0000

Great solution! That did the trick Che.

By: Che

Che — Wed, 16 Dec 2009 22:39:44 +0000

You could apply the style via javascript after the Cufon.now() call to get around this.

ie – with jquery
$( “h1, h2, h3″ ).css( “visibility”, “visible” );

By: Mike

Mike — Fri, 11 Dec 2009 20:59:24 +0000

You can do it, but it isn’t valid.

http://forums.asp.net/t/1303967.aspx#2551423

By: Dave Onkels

Dave Onkels — Thu, 10 Dec 2009 01:28:41 +0000

As mentioned, IE8 is being stubborn with ‘visibility: hidden’ so it looks like the best solution that works with all browsers (including MSFT’s state-of-the-art IE8) is to use:

text-indent: -9999

and follow it up with a

text-indent: 0

Great solution Chris and Rogie!