How can I avoid seeing the rendering of Cufon font replacement tool while loading a page?

Question

I've published a website and every page has an or element with Cufon (cufon-yui.js) and sometimes while the page is loading , the visitor can see the text replacement tool doing it's job. It looks bad, some users are asking about it.

Why would that be happening if I'm using it (cufon) like anybody else and I don't' see this text rendering issue happening in most sites.

Also, there's an issue happening as well, with the Hyperlinks that are using Cufon.

Sometimes the cursor (a hand that appears for hyperlinks) disappear , it's bizarre.

Answer 1

I've just started looking at Cufon, so I'm not sure I'm qualified to give an opinion, but I've read the IE has (or had) rendering issues and that you needed to add <script type="text/javascript">Cufon.now();</script> to the end of your body (right before the </body>. If you are running any other heavy scripts on the page, you might want to put them as low on the page as possible and place the Cufon.now() right above those scripts (place Cufon higher in priority). If that doesn't work, try hiding your Cufon elements with JS as soon as the DOM has loaded (visibility:hidden) and then unhide them when the onload event fires (though I'm not sure that's much better than the text flickering).

Answer 2

Use something better?: http://reisio.com/examples/webfonts/

(if you worry about distribution legality, replace your fonts with any of the numerous free clones available all over the internet)

Answer 3

use one of the google web fonts or typeface/