Cufon + jQuery messes up on IE

Question

I rather new at this and I am really out of solution here. Right now I am customizing a Opencart theme to suite my needs.

this is the website: http://lasarito.ro/lenjerie-de-pat.

It works flawless on Chrome and FF, IE however messes up everything. In my research I understood that the sizzle library that is embedded in jQuery is not friends with Cufon so I guess this is why IE throws a bunch of javascript errors and messes the rendering.

Another issue I can't wrap my mind around is why when i use firebug to display the HTML, everything is messed up, css and js includes are in the body section instead of the head as they appear in the source.

Any ideas? Thanks

Answer 1

In a project I worked on I added the Cufon.replace call's in jQuery's document ready event handler. I would give that a try:

$(document).ready(function () {
    Cufon.replace('h1,.name, h2,.box .box-heading', { fontFamily: 'Josefin Sans Std Light' });
    Cufon.replace('.price-range', { fontFamily: 'Helvetica CE 55 Roman' });
});

It is vital that jQuery is included before Cufon and that jQuery has finished loading. Cufon relies on jQuery's selector engine for selectors including more than just tagnames (ie. classes, ids etc). I found out that older browsers (< ie 9) are very sensitive here.

Another thing you can try is step 4 on https://github.com/sorccu/cufon/wiki/Usage:

Step 4 – Make Internet Explorer behave

Unfortunately one problem remains with Internet Explorer. In most cases, there is a short but visible delay before the text is replaced. You can avoid this issue by inserting the following snippet right before the closing tag (or before any external scripts such as Google Analytics):

<script type="text/javascript"> Cufon.now(); </script>