Question

Okay, I’m a little stumped with this one. I am usng Cufon to replace my text with a non-web standard font. This is a script I’ve used an aweful lot & never had a problem with it in the past. Along comes IE and it decides to ruin my day.

I am using the most up to date version of cufon (as at the date of this post) and am reference a number of differnt elements in my header.php file (for a WordPress site):

    <script type="text/javascript" language="javascript" >Cufon.replace('.learnmore', { color: '#fff', textShadow: '1px 1px #0e1b0a', hover: { textShadow: '1px 1px #000',  color: '#fff'   }   });     </script>
    <script type="text/javascript" language="javascript" >Cufon.replace('.logo span, h1, h2, h4 , h5, h6, .learnmore, .prosto_button, .comment-reply-link, .slide_button, .page_title .bold p, .textonlycont, .h-title', { fontFamily: "Aller"});   </script>
    <script type="text/javascript" language="javascript" >Cufon.replace('.h-title', { textShadow: '1px 2px #5C1003' });     </script>
    <script type="text/javascript" language="javascript" >Cufon.replace('h1', { color: '-linear-gradient(white, #ececec)', textShadow: '#862905 0 2px'});   </script>
    <script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/pondera/js/cufon/Vegur.font.js?ver=1.0.0'></script>
    <script type="text/javascript" language="javascript" >Cufon.replace('h3, #serv-benefit h4, p.quote, #letstalk label', { fontFamily: "Vegur"});  </script>
    <script type="text/javascript" language="javascript" >Cufon.replace('#letstalk label', { fontFamily: "Vegur", textShadow: '1px 2px #293719' }); </script>

Not sure if this is the best way to reference multiple different fonts but it’s working fine in all browsers bar IE (specifially v.8.0.7 which I’m currently running). IE gives the following error report:

Webpage error details:

Message: Invalid argument.
Line: 7
Char: 8520
Code: 0
URI: http://localhost/wordpress/wp-content/themes/pondera/js/cufon/cufon-yui.js?ver=1.0.0

I investigated the Cufon js file and this appears to be just before a D.replaceChild reference. Now I am far from a JS expert so I have no idea what is causing this problem…

Just for reference, by way of a test, I attempted to remove all bar the first Cufon.replace(... reference (i.e. the above code) to see if it was my poor coding but this didn’t fix it.

Any suggestions would be greatly appreciated! Thanks in advance for readaing this, I’d be happy to provide more info should it be required.

Answer 1

Okay I think I have found a soultion (of sorts)… and possibly a bug in Cufon itself (although I wouldn’t be surprised if I was wrong!).

As Epascarello suggested, I’m proved the layout of my code to fewer script tags:

    <script type="text/javascript" language="javascript" >
        Cufon.replace('.logo span, h1, h2, h5, h6, .learnmore, .prosto_button, .comment-reply-link, .slide_button, .page_title .bold p, .textonlycont, .h-title', { fontFamily: "Aller"});
        Cufon.replace('h1', { color: '-linear-gradient(white, #ececec)', textShadow: '#862905 0 2px'});
        Cufon.replace('.learnmore', {   color: '#fff', textShadow: '1px 1px #0e1b0a', hover: { textShadow: '1px 1px #000',  color: '#fff'   }});
        Cufon.replace('.h-title', { textShadow: '1px 2px #5C1003' });
    </script>
    <script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/pondera/js/cufon/Vegur.font.js?ver=1.0.0'></script>
    <script type="text/javascript" language="javascript" >
        Cufon.replace('h3, #serv-benefit h4, p.quote, #letstalk label', { fontFamily: "Vegur"});
        Cufon.replace('#letstalk label', { fontFamily: "Vegur", textShadow: '1px 2px #293719' });
    </script>

Whilst doing this I took some time to sequentially test the code as it was inserted to see when the error occured. During this I tested each selector & all worked bar one… h4!?!? To clarify if you amend the first linein the code above to the following, the IE error will occur:

        Cufon.replace('.logo span, h1, h2, h4, h5, h6, .learnmore, .prosto_button, .comment-reply-link, .slide_button, .page_title .bold p, .textonlycont, .h-title', { fontFamily: "Aller"});

Weird huh?! The soultion I’m using is to amend my markup to avoid the H4 tags but presumably this is an error in Cufon?

Hope this helps someone!