Problems with Cufon and IE6/7/8

Question

I'm working on a reskin of this site, but having an odd problem with Cufon. It's working perfectly well with html elements such as H1, H2 etc but not working at all with #ID's and classes.

Can anyone offer any thoughts? Thanks in advance.

Answer 1

No problem, this one's easy to fix. Just re-order your script tags in the head of the document. jQuery needs to be loaded before cufon.

Explanation: Cufon will try to use the browser's native document.getElementsByTagName if a library like jQuery is not detected, even if the library is loaded after Cufon loads. By loading jQuery first, Cufon will detect it, and all of your calls to Cufon.replace(); will use jQuery.

On a side note, Holy External HTTP Requests Batman!

<script src="/www/include/js/cufon.js" type="text/javascript"></script> 
<script src="/www/include/js/aller.js" type="text/javascript"></script> 
<script src="/www/include/js/ebrima.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.form.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.livequery.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.selectboxes.js" type="text/javascript"></script> 
<script src="/jss/jquery/nyroModal/js/jquery.nyroModal.js" type="text/javascript"></script> 
<script src="/jss/jquery/ui-1.7/jquery-ui-1.7.min.js" type="text/javascript"></script> 
<script src="/jss/jquery/jClock/jquery.jclock.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.cp.util.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.bgiframe.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.ajaxQueue.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.thickbox.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.autocomplete.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.timers.js" type="text/javascript"></script> 
<script src="/jss/flash/swfobject.js" type="text/javascript"></script> 
<script src="/jss/jquery/jquery.juitter.js" type="text/javascript"></script> 
<script src="/master/www2/include/js/functions.js" type="text/javascript"></script> 
<script src="/www/include/js/functions.js" type="text/javascript"></script> 
<script src="/master/www2/include/js/load_ready.js" type="text/javascript"></script> 
<script src="/www/include/js/load_ready.js" type="text/javascript"></script> 
<script src="/www/include/js/jquery.simplyscroll-1.0.4.js" type="text/javascript"></script>

You should really compile those into a single script file for performance reasons. You should see page download times reduced by an order of magnitude (guesstimate). You may also want to switch to using Google's hosted CDN jQuery library.

Also, it looks like you're using jQuery 1.3 w/ the LiveQuery plugin. jQuery 1.4 should be able to handle everything without the need of a plugin.

Side Note #2:

All of your similar Cufon method calls can be combined into a single one, and this will also perform better:

// Instead of this:
Cufon.replace('h1', { fontFamily: 'Ebrima' });
Cufon.replace('h2', { fontFamily: 'Ebrima' });
Cufon.replace('h3', { fontFamily: 'Ebrima' });
Cufon.replace('h4', { fontFamily: 'Ebrima' });
Cufon.replace('h5', { fontFamily: 'Ebrima' });
Cufon.replace('h5', { fontFamily: 'Ebrima' }); // I assume you meant h6 here

// Just do this:
Cufon.replace('h1, h2, h3, h4, h5, h6', { fontFamily: 'Ebrima' });