Fix Cufon Flash of Unstyled Content ∞
Posted at 12:35 AM on July 25th, 2009
Whenever I’ve used cufón, I’ve ALWAYS experienced a FOUC, otherwise known as a Flash of Unstyled Content. If you are experiencing the same issue, then this fix is definitely going to make you happy. I must give credit for the fix to Rogie King who worked it out like Jane Fonda in the 80s.
Just under the opening <body> tag, you should add the following line of CSS, making sure to specify the items you are styling via cufón:
<style type="text/css">
.cufon-loading h1{
visibility: hidden !important;
}
</style>
Then at the very bottom of the document, before the closing </body> tag, you should call Cufón, then show the stuff you were hiding before:
<script type="text/javascript">
<!--
Cufon.replace("h1, h2, h3");
Cufon.now();
-->
</script>
<style type="text/css">h1,h2,h3{ visibility : visible }</style>
Remember to replace “h1,h2,h3″ with the elements you are styling via javascript. And boomshakalaka. You’re done! No more FOUC. Tell your friends. Or don’t, they will be super-jealous.
24 comments so far
Oops. I dribbbled.
-
I designed this for a big announcement on the UpThemes blog.
-
Working on revisions to a logo we were commissioned to design.
-
-
Client requested some color changes.
Steal this design. See if I care.
Hand-crafted in the year of the tiger.
Chris,
Excellent tip, I couldn’t figure out for the life of me how to prevent showing my unstyled content. Using Cufon on a few projects so this tip came at a pretty critical time. I had the Cufon.now(); piece and fro the Cufon docs thought that would do the trick.
Ahhh, leave it to Chris and Rogie to provide yet another great solution. I’m a Cufon addict and this was definitely one of those little pet peeves that I couldn’t stand. Thanks for this fix!!!!!
Might want to check out the ‘shareability’ of cufon though, as in, no highlight and copy and paste or click bookmarklet to tweet to twitter ;(
@Roger, cufon text can be copy/pasted, however, there is no visible highlight on it, which is a pretty well defined interaction on the web. We’ll see if they can get it added in the weeks or months to come.
What about the few people who don’t have a javascript enabled browser, or choose not to enable it?
how about another style underneath in a noscript tag then sets the visibility back to visible?
Big Pimpin’ spendin cheese!
I’m glad I know you and all of your jedi-mind tricks.
[...] Chris Wallace has published a fix for the Cufón FOUC bug. Whenever I’ve used Cufón, I’ve ALWAYS experienced a FOUC, otherwise known as a Flash of Unstyled Content. If you are experiencing the same issue, then this fix is definitely going to make you happy. [...]
[...] text replacement system. I took care to control the appearance of this so as to avoid the dreaded FOUC. The whole teaser area is a clickable link through to the [...]
I just tried this fix, but it doesn’t seem to be working in IE 8. Even on your site the post title “Fix Cufon Flash of Unstyled Content” isn’t showing in IE8. Any ideas?
I can confirm what scott has posted. The cufon replacement doesn’t work with a style set to visibility: hidden after the body.
Any suggestions?
Jon
Any thoughts on how to make this technique validate an XHTML/STRICT DOCTYPE?
You can’t put a tag inside of the
*You can’t put a
<style>tag inside of the<body>.Sure you can.
You can do it, but it isn’t valid.
http://forums.asp.net/t/1303967.aspx#2551423
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” );
Great solution! That did the trick Che.
Apparently, Cufon already has a method of dealing with this. Simply add this into yor stylesheet:
.cufon-loading h1
visibility: hidden !important;
}
replacing the h1 with any elements used by Cufon. Seems to be working so far on my site.
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!
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.
Anyway it is a good trick to solve FOUC!
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)
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 ?
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.
Just my 0.02$, this worked for me, cross browser: http://piestar.net/2009/04/27/stopping-the-cufon-fouc-in-ie/