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 Content (FOUC) when the page is loading, with the default pre-replaced text shining through.

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 so all your offscreen rules happen in a CSS file and not in Javascript.

In your  stylesheet add this class rule:

 .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.