A quickie but a goodie. Cufón’s great for embedding fonts into web pages without having to resort to images or Flash. In some cases there is a Flash Of Unstyled Text (FOUT) when the page is loading, with the default pre-replaced text rendered in a web font shining through for a split second.
I tried all the recommended options including Cufon.now() and a visibility CSS trick but neither seemed to work. Eventually I came up with this solution, which only involves removing a class added to Cufón targets. All your offscreen rules happen in a CSS file and not in Javascript.
In your stylesheet add this class rule (which is applied to every HTML element you wish to have Cufón-ised) e.g <h2 class=”cufonised”>
.cufonised { text-indent : -9000px; }
After your Cufon.replace javascript (which I place in a document.ready event handler), add this JS:
jQuery('.cufonised').removeClass('cufonised');
…which resets the text-indent style and shows the Cufón-ised text (i.e the “Cufon.replace()” happens off-screen to the left). visibility : hidden/visible doesn’t seem to work in IE here, so we resort to text-indent.
For non JS enabled browsers and devices, use a noscript tag to reset the style and show the un-Cufón-ised text
<noscript><style type="text/css"> .cufonised { text-indent : 0px; } </style></noscript>
After all that you should have a well behaved Cufón replacement happening cross browser.
