Cufon loaded asynchronously doesn't render in IE
I had the same problem - I addressed this by using the browser detection of head.js to do the following:
if (head.browser.mozilla || head.browser.webkit || head.browser.opera || (head.browser.ie && (head.browser.version == '9.0'))) { head.js('script/jquery.min.js', 'script/cufon.js', function () { head.js('script/bebas_neue_400.font.js', function () { Cufon.replace('h1', { textShadow: '1px 1px rgba(0, 0, 0, 0.2)' }).now(); // or a head.js('scripts/file.with.cufon.replacement.js'); }); }); } else { // here we load scripts depending on GZIP support for this browser document.write('\x3Cscript type="text/javascript" src="script/jquery.min.js">\x3C/script>'); document.write('\x3Cscript type="text/javascript" src="script/cufon.js">\x3C/script>'); document.write('\x3Cscript type="text/javascript" src="script/bebas_neue_400.font.js">\x3C/script>'); document.write('\x3Cscript type="text/javascript" src="script/file.with.cufon.replacement.js">\x3C/script>'); }
You could also use conditional comments (I didn't because I am also doing GZIP support detection in JavaScript and needed to adjust the scripts which are loaded dynamically.)
It's a hack, but should be useful enough until it's addressed within the library itself.
(I have also posted GIST with a more complete example here)
try calling
<script type="text/javascript"> Cufon.now(); </script>
just before </body>
tag closes.
Try adding Cufon.now()
after the Cufon.replace
call, like so:
Cufon.replace('h1', { fontFamily: 'Stag Bold' });Cufon.now();