17 Sep 2010

How to get Cufon work in IE 6 & 7

Web Design, Development Tips & Tutorials 12 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});

12 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!!!

Leave a Reply

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