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.
Just my 0.02$, this worked for me, cross browser: http://piestar.net/2009/04/27/stopping-the-cufon-f...
- spam
- offensive
- disagree
- off topic
LikeI'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 ?
- spam
- offensive
- disagree
- off topic
LikeIt 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. :)
- spam
- offensive
- disagree
- off topic
LikeI 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)
- spam
- offensive
- disagree
- off topic
LikeAnyway it is a good trick to solve FOUC!
- spam
- offensive
- disagree
- off topic
LikeI 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.
- spam
- offensive
- disagree
- off topic
LikeAs 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!
- spam
- offensive
- disagree
- off topic
LikeApparently, 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.
- spam
- offensive
- disagree
- off topic
Like*You can't put a <style> tag inside of the <body>.
- spam
- offensive
- disagree
- off topic
LikeSure you can.
- spam
- offensive
- disagree
- off topic
LikeYou can do it, but it isn't valid.
http://forums.asp.net/t/1303967.aspx#2551423
- spam
- offensive
- disagree
- off topic
LikeYou could apply the style via javascript after the Cufon.now() call to get around this.
ie - with jquery
$( "h1, h2, h3" ).css( "visibility", "visible" );
- spam
- offensive
- disagree
- off topic
LikeGreat solution! That did the trick Che.
- spam
- offensive
- disagree
- off topic
LikeAny thoughts on how to make this technique validate an XHTML/STRICT DOCTYPE?
You can't put a tag inside of the
- spam
- offensive
- disagree
- off topic
LikeI 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
- spam
- offensive
- disagree
- off topic
LikeI 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?
- spam
- offensive
- disagree
- off topic
LikeBig Pimpin' spendin cheese!
I'm glad I know you and all of your jedi-mind tricks.
- spam
- offensive
- disagree
- off topic
LikeWhat 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?
- spam
- offensive
- disagree
- off topic
Like@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.
- spam
- offensive
- disagree
- off topic
LikeMight want to check out the 'shareability' of cufon though, as in, no highlight and copy and paste or click bookmarklet to tweet to twitter ;(
- spam
- offensive
- disagree
- off topic
LikeAhhh, 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!!!!!
- spam
- offensive
- disagree
- off topic
LikeChris,
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.
- spam
- offensive
- disagree
- off topic
Like