Fix a Cufon Text Replacement flash of unstyled content

This article by Chris Wallace solved the flash of unstyled Cufon text replacements mainly seen in IE6.

You can see my first use of this on the Paparazzi website.

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.

Original article: http://www.chris-wallace.com/2009/07/25/fix-flash-of-unstyled-content-with-cufon/

Revisions

There are no revisions for this post.

Tags: , , ,

No comments yet.

Leave a Reply