Menu
I'm using Cufon to replace the font of selected heading elements on a site I'm working on, but whenever I load a page, there is a noticeable flash of unstyled text before Cufon replaces the text. I expect that I may be doing it wrong. Here's what I have in the <head>:
<script src="/js/Monotype_Corsiva_italic_400.font.js"></script>
<script src="/js/PalatinoBoldum_700.font.js"></script>
<script>
Cufon.replace('header h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('header h2', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('aside h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('#site-info h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('abbr[title="My Abbreviation"]', { fontFamily: 'PalatinoBoldum' });
</script>
And here's what I have at the end of my document:
<script>
// !Cufon: replace the fonts
// --------------------------------------------
Cufon.now();
// !Track & analyze stats
// --------------------------------------------
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
// Google analytics stuff...
</script> <!-- EO Tracking -->
</body>
</html>
What am I doing wrong? Thanks in advance!
835
The browser renders the entire page (using the standard text rendering specified in your stylesheet), then the Cufon script goes back and replaces it. Due to the way browsers render pages, and the fact that the script fires after the page's DOMLoaded event, there's no good way to avoid the momentary flash of unreplaced text.
I said no "good" way... there are bad ways to do it, like hiding the text that's going to be replaced with CSS in your main stylesheet, but that's very bad for accessibility and/or people who have scripts/flash turned off.
Currently this problem is one of the known limitations of any script/flash-based text replacement techniques.
EDIT:
The 24 ways blog had an article on using Data URIs with the CSS3 @font-face declaration to avoid the "Flash Of Unstyled Text". Basically, you embed the font data directly into the stylesheet.
While it's not pretty, it does mean the font is loaded with the CSS and is ready for use immediately. @font-face is currently supported by Safari and Firefox, and will be supported in Chrome 4 (which is getting close). IE support is limited to Microsoft's EOT format, so I count it as "not supported".
Check it out: How to use Data URIs to avoid the Flash Of Unstyled Text
112
Thought i'd add this for the next person who's looking for an answer to this issue as it appears to have completely solved the issue for me.
.cufon-loading { visibility: hidden; }
The above CSS will hide the plain-text that cufon is replacing before cufon loads.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
