17 Sep 2010

How to get Cufon work in IE 6 & 7

Web Design, Development Tips & Tutorials 13 Comments

I have been using Cufon and when it comes to testing, all looks good in Firefox,Chrome and other web-kit browsers but the styling is not applied in IE6 or IE7. I discovered a fix to this, add/attach/link a JavaScript library like jQuery just before the Cufon library and IE6 or IE7 will behave!

E.g

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blah blah</title>
<link href="style.css" rel="stylesheet" type="text/css"  media="screen"/>
<script src="lib/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/cufon-yui.js"></script>
<script type="text/javascript" src="lib/Calibri_400.font.js"></script>
<script type="text/javascript">
    Cufon.replace('#menu a',{hover: true});
</script>

PS

  • Ensure the style sheet is attached before the Cufon library
  • Use Strict Doc type if you want Cufon to respect line heights.
  • Add this before the </body> tag, before any javascript library/file
  • <script type="text/javascript">
     //<![CDATA[
     Cufon.now();  //]]></script>

Hover effect
For cufon to respect the hover effect on a link , add hover: true to your Cufon replacement statement e.g

Cufon.replace('#upper a', {hover: true});

13 Responses to “How to get Cufon work in IE 6 & 7”

  1. Jason says:

    Thanks so much!!!

  2. Ish says:

    You are a life saver, thanks

    loading jQuery library first, fixed it for me.

  3. Andre says:

    you will be the man for a while :D

    thanks

  4. RV says:

    Sorry for this stupid question, I have no idea where would I add/link this code. Can you give me detailed instruction where would I place this code? Thanks.

  5. Jin Angel says:

    wow, wonderfull. I like you ;”)

  6. John says:

    Thank you so much!!!

  7. Niki says:

    Hi,
    I have IE6 with updates on WinXP sp1, the issue is that Cufon does’nt even show up at all, if I open the websites online. What could be the reason? It all works in Firefox and Opera.

    It doesnt work even with sites having jquery in scripts or else, please help and wirte to me.
    Nki @ Blogger
    [ PS: Please include your Email in email text or link to this page, So I can remember ]

Leave a Reply

Web Design Nairobi,Kenya Website Design, Website Design Kenya,Nairobi Website Design