Geek Answers Handbook

Cufon font replacement: how can I fix a flash of jagged text that occurs when a page loads?

I use Cufon to replace the font of the selected title elements on the site I'm working on, but whenever I load the page, a noticeable flash of unencrypted text appears before Cufon replaces the text. I expect that maybe I'm wrong. Here is what I have in <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 is 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!

+4
source share
4 answers

The browser displays the entire page (using the standard text rendering specified in your stylesheet), then the Cufon script returns and replaces it. Due to the way browsers render pages, as well as the fact that the script is run after the DOMLoaded event of the page, there is no good way to avoid an instant flash of text without changes.

I did not say the “good” way ... there are bad ways to do this, for example, hide text that will be replaced by CSS in your main stylesheet, but this is very bad for accessibility and / or for people who have scripts / flash is off .

This problem is currently one of the known limitations of any script / flash based text replacement methods.

EDIT

There was an article on a 24-way blog post about using data uri with CSS3 @ font-face declaration to avoid "Flash of Unstyled Text". Basically, you insert the font data directly into the stylesheet.

Although not very, it does mean that the font is loaded using CSS and is ready to use immediately. @ font-face is currently supported by Safari and Firefox and will be supported in Chrome 4 (which is coming). Support for IE is limited to the Microsoft EOT format, so I consider it "not supported".

Note: How to use data URIs to avoid flash text of non-styled text

+7
source

I think I will add this for the next person who is looking for an answer to this question since he seems to have completely solved the problem for me.

 .cufon-loading { visibility: hidden; }

The above CSS will hide the plain text that cufon replaces before loading cufon.

+6
source

Hiding headers using CSS visibility is not recommended for the reasons mentioned above. IE8 also has problems displaying cufon text when it is hidden ...

An alternative is to simply move the caption text to the left of the screen while displaying it using the large negative "text-indent" value.

  • You need to move the headers off the screen using standard CSS in the header, or if you are worried about hiding text from people who don't have JS, CSS can be set using jquery.

    eg. '#id {text-indent: -9999px; } '

  • Then put your cufon replacement code immediately before the body body tag in the script tag

  • Add a call to Cufon.now ();

  • Using the jquery.css () method, put the headers back by setting the text indent to 0

    eg. $ ('# id'). css ('text-indent', '0');

EDIT:

It seems that the initial negative indentation should be set using CSS (not jquery), because the page should be fully loaded before jquery code is called.

The danger with CSS indentation is that people who have JS disabled will not be able to see the headers at all.

If I find a reasonable solution, I will post it here.

+1
source

You can use js to insert a style rule to hide cufon'd text before the body loads ...

 <html> <head> ... </head> <body> <script> // put this at the beginning of the body (function(){ var i = document.styleSheets.length, s = document.createElement('style'); document.head.appendChild(s); document.styleSheets[i].addRule( 'h1,h2,h3,h4,h5,h6', 'text-indent:-9999px' ); }()); </script> ... </body> </html>
+1
source

More articles:


All Articles