where's the salt?

04/29
2011

Cufon and IE9: How to get IE9 to render Cufon properly (29,553 views)

If you are using Cufón font replacement in your web project, Microsoft has another surprise for you.

Their newest release of Internet Explorer, IE9, does not render Cufón at all.
Meaning: Everything on your site that you so carefully crafted – probably your menus and headers – simply don’t show up. Not even in ugly Times (New Roman).

Your otherwise beautiful website might look like this:

Screenshot Cufón not rendered in IE9

All menus and H-Tag are missing, which makes the page almost useless.

To check how your site looks in various versions of Internet Explorer, try the netrenderer by GeoTek Datentechnik.

Why I use them: Unlike other sites that offer a similar service, the preview on theirs is almost instantaneous.

When using their service, please don’t forget to add /index.php if you are trying to generate a preview for a WordPress site and are using mod_rewrite to generate Search-Engine-Friendly Permalinks.

E.g. – if your site’s address is http://yoursite.com enter http://yoursite.com/index.php in the box.

How to resolve?

First: Download the new version of cufon-yui.js (current version is 1.09i).
Updated Version! (Thanks to mike)

Second: Add the following conditional statement into your site’s header, before all Cufon.replace() calls. When this happens depends on your site’s code, so please check your code.


Third: Make Internet Explorer 9 behave like IE8 by adding this to the header (just before the closing tag should do the trick):

<meta http-equiv="X-UA-Compatible" content="IE=8" />

To be on the safe side I am combining 1) and 2) – simply because I noticed that by only using one IE sometimes still refuses to render Cufón properly.

When done, the result looks like this — all menus and headers are now visible:

Screenshot Cufon properly rendered in IE9

Links:
Download cufon-yui.js
netrenderer by Geotek Datentechnik
Official Cufón Site

Tags:

Date posted: Friday, April 29th, 2011 at 8:24 am (3 years, 6 months ago.)
Posted in: business mix, tech mix
Comments RSS Feed Comments RSS Feed
Reply
Ttrackback
Print This Post Print This Post
About the author:

Nina Khoury is a software engineer, self-described geek and EVP of ninanet site solutions. She founded one of the first online agencies in Austria in 1997, taught at various universities for seven years and now lives in Sin City - Las Vegas, NV.

54 Responses to “Cufon and IE9: How to get IE9 to render Cufon properly”

  1. 1

    Thanks for your very useful article. I did it and it worked for IE 9, even if now it’s showing a number on the top center of the page only with IE9 of course. Do you know why? Thanks

    Davide on May 19th, 2011 at 1:40 am
  2. 2

    thanx for sharing!

    all the best,

    @gar

    edgar neo on July 11th, 2011 at 3:56 am
  3. 3

    Aha! This is what was bugging our website.
    Thanks for sharing this tip.

    Rickert Pos
    FeatureTalent.nl

    Rickert Pos | FeatureTalent.nl on July 11th, 2011 at 3:57 am
  4. 4

    what is the conditional statement at point 2? I can’t make it out

    john lalor on July 17th, 2011 at 5:01 am
  5. 5

    not sure which conditional statement you are referring to..?

    nina on July 17th, 2011 at 11:27 am
  6. 6

    This worked perfectly on our site; thanks for sharing!

    Jasper on September 19th, 2011 at 1:32 am
  7. 7

    It worked great as all the h tags now displayed in IE 9. Only problem was the new cufon version broke the way the nav menus display

    bryan on October 29th, 2011 at 1:45 pm
  8. 8

    John Lalor is refering to the conditional statement in point two. There is no statement visible – at least not in IE8.

    Aha! Just checked it in Chrome and it shows up. It reads:
    <!–[if gte IE 9]>–>

    Russell on November 24th, 2011 at 3:06 am
  9. 9

    Thanks for the article, but the information isn’t quite right. The first step is correct, you must download v1.09i. However, the second step required is to just add the following before the tag (if you don’t already have it):

    Cufon.now()

    The conditional statement and IE compatible meta are not required.

    Rory McCrossan on December 7th, 2011 at 6:56 am
  10. 10

    The comment above had the HTML stripped – stupid filter. It should be:

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

    Before the </body> tag

    Rory McCrossan on December 7th, 2011 at 6:58 am
  11. 11

    Thank you so much! Your tips have not just sorted out my cufon problem, but have totally sorted the CSS issues I was having with that dastedly IE9. I am enternally grateful!

    ha55ett on December 21st, 2011 at 4:00 pm
  12. 12

    thanks! I couldnt figure out what was wrong- until now!

    sd on January 11th, 2012 at 11:25 am
  13. 13

    Fantastic post it did the trick . Thank you thank you you saved me a load of work

    Mark on January 27th, 2012 at 8:43 am
  14. 14

    Thank you for this informative post ! It solved my problem !

    Morad Echarkaoui on February 28th, 2012 at 4:12 am
  15. 15

    I have managed to get all my text to show in IE9 now cheers but all my Headers are now very large and out of place. This is happening in Firefox also.
    Can someone help please.
    Cheers
    Simon

    simon on March 1st, 2012 at 5:44 am
  16. 16

    Hi Simon,

    looks like your CSS might need editing.
    Try changing (or applying) styles to the tags you want to have displayed in Cufon.

    nina on March 2nd, 2012 at 7:36 am
  17. 17

    Thanks for that, it solved my problem!

    Sorina on March 6th, 2012 at 6:34 am
  18. 18

    geeezas, you are a lifesaver!!!!

    ThA-B on March 22nd, 2012 at 7:46 am
  19. 19

    [...] I noticed suddenly that cufon stopped working for me in ie9 after latest ie9 update. here is a solution that solved it for me: http://blog.ninanet.com/2011/04/29/cufon-and-ie9 [...]

    Cufon not working in ie9 - Cogito Ergo Sum on March 22nd, 2012 at 7:50 am
  20. 20

    you’re a lifesaver!! it’s 2.40am… and it’s finally working properly!! thanks a lot!!!

    gabriella on April 5th, 2012 at 11:41 pm
  21. 21

    Dude! You’ve rescued me from hours of tearing my hair out – much appreciated.

    JacksColdSweat on April 10th, 2012 at 5:19 pm
  22. 22

    I was able to get it working in IE9 using Cufon v1.09 (not 1.09i) and just adding your step #2 conditional script.

    Thanks so much for the help!!

    Collin on April 11th, 2012 at 7:01 pm
  23. 23

    the download linked to at the start of the article didnt fix the problem for me but using 1.09i from cufon.shoqolate.com did. thanks for the pointers though :)

    mike on April 12th, 2012 at 7:56 am
  24. 24

    Hi mike,

    I updated the download with the new version – thanks for your comment!

    Nina

    nina on April 12th, 2012 at 9:55 am
  25. 25

    cool man , amazing …………

    mahi on April 27th, 2012 at 12:59 am
  26. 26

    I did this and it worked (minus the updated version you have up there) Thanks a million!

    Esther on April 30th, 2012 at 11:20 am
  27. 27

    Thanks for the fix – worth also noting that you can use Google Web Fonts!

    Andy Kent on May 12th, 2012 at 3:09 am
  28. 28

    Great article – real time saver – many thanks from my client and I.

    Just one thing though. I applied all 3 steps but the font it ended up rendering was not the replacement font.

    On a hunch I removed the 2nd step and bingo, she’s a working again!

    Many thanks!

    Ian B on May 15th, 2012 at 1:30 am
  29. 29

    This works great. I followed the steps and I could solve my problem.

    many thanks.

    Edson on June 11th, 2012 at 3:22 pm
  30. 30

    I’m trying this fix with an asp.net fix using a master page, but I can’t get it working. Does the fix need to be applied against each page separately or can it work from within the master page?

    Richard M on June 13th, 2012 at 8:09 am
  31. 31

    Hi Richard,
    I’m sorry, but I have absolutely no idea about asp.net’s inner workings :(

    nina on June 13th, 2012 at 9:22 am
  32. 32

    Thanks this fixed my problem! It was the .js file for me.

    Raleigh Leslie on June 14th, 2012 at 4:04 pm
  33. 33

    This fixed my problem in just seconds. Thank you.

    Chris on June 20th, 2012 at 12:54 pm
  34. 34

    Perfect! Thanks…what a life saver! :D

    Jared Latigo on June 26th, 2012 at 1:53 pm
  35. 35

    Great post! Thanks for sharing a few solutions. We’re always chasing IE surprises.

    Matt Smith, modMACRO on June 28th, 2012 at 12:17 pm
  36. 36

    Hi,
    I have a custom blog designed in tumblr.com. It uses Cufon tags for navigation. But it is breaking in IE9. I tried all the steps mentioned in the article, but nothing seems to be working. Even the Document Mode of the browser doesn’t changes to IE8. I have used the following things:

    Cufon.set(‘engine’, ‘canvas’);
    in head tag and
    Cufon.now();

    Can anyone please suggest why it is not working or m I doing something wrong?

    sam on July 9th, 2012 at 5:55 am
  37. 37

    here is the blog that doesn’t render properly
    http://v-tidemp.tumblr.com/

    sam on July 9th, 2012 at 5:56 am
  38. 38

    Thanks, this worked great!

    Louis on July 12th, 2012 at 1:56 am
  39. 39

    thank you thank you thank you!!

    lucie on July 26th, 2012 at 9:53 am
  40. 40

    You’re welcome! Glad I was able to help :)

    nina on July 27th, 2012 at 10:53 am
  41. 41

    Brilliant! All I did was add the second step and it works perfectly. No other changes needed. This solves a 3 hour problem!

    John on July 31st, 2012 at 7:23 pm
  42. 42

    Life saver, man!

    Dave on August 21st, 2012 at 9:01 am
  43. 43

    This was causing big issues for a client and the fix worked perfectly. Thanks for posting it. Much appreciated.

    Kenton on September 11th, 2012 at 4:50 pm
  44. 44

    Thanks for the fix. I did have to get a clean version of cufon.js 1.09i from http://cdnjs.cloudflare.com/ajax/libs/cufon/1.09i/cufon-yui.js as the additional code at the end of your one caused the fix not to work. So thanks for the info on fixing the cufon IE9 issue.

    Nik Cree on September 19th, 2012 at 11:43 pm
  45. 45

    Thank you so much! This was exactly what I needed before I broke something. :) So happy the site is working now!

    Lisa Marie on September 28th, 2012 at 7:31 am
  46. 46

    Glad I was able to help!

    nina on September 28th, 2012 at 8:12 am
  47. 47

    I`ve just implemented it and it seems to not working on IE9 unfortunately ;/

    alex on October 30th, 2012 at 7:09 am
  48. 48

    Is there anyone who could have a look at the site I am working on please?

    http://bit.ly/SdYjtI

    I changed everything you said, and nothing ;/

    alex on October 30th, 2012 at 7:44 am
  49. 49

    Thanks so much! This worked wonders.

    Lana on November 18th, 2012 at 9:33 pm
  50. 50

    This didn’t work for me. What did work is updating the code to version 1.09i! Easy as pie!

    http://cdnjs.cloudflare.com/ajax/libs/cufon/1.09i/cufon-yui.js

    Nate on November 20th, 2012 at 5:47 pm
  51. 51

    There is something wrong with the file you provided for people to download, but downloading 1.09i from http://cufon.shoqolate.com/generate/ worked great, without worrying about steps 2 or 3. Thank you for pointing me in the right direction though. I would suggest you at least update your download link however.

    Kelley on December 27th, 2012 at 2:47 pm
  52. 52

    I just tried giving the IE conditional statement mentioned in step 2 and it worked. Thanks a lot :)

    Tiji Varghese on December 29th, 2012 at 6:59 am
  53. 53

    This worked great for me in fixing an usupported gavick joomla template called hewahoo. Thanks so much!

    tup on February 11th, 2013 at 12:32 pm
  54. 54

    Thanks so much! It is really works.

    Dubai website design on February 20th, 2013 at 6:38 am

Leave a Reply


search

Categories