where's the salt?

04/29
2011

Cufon and IE9: How to get IE9 to render Cufon properly (16,270 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

(Visited 10,289 times, 1 visits today)

Tags:

Date posted: Friday, April 29th, 2011 at 8:24 am (12 years, 10 months ago.)
Posted in: business mix, tech mix
Comments RSS Feed Comments RSS Feed
Reply
Ttrackback

35 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! 😀

    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

Leave a Reply


search

Categories

css.php