Cufon loaded asynchronously doesn't render in IE Cufon loaded asynchronously doesn't render in IE ajax ajax

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();