04/29
2011
Cufon and IE9: How to get IE9 to render Cufon properly (16,736 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:
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:
Links:
Download cufon-yui.js
netrenderer by Geotek Datentechnik
Official Cufón Site
Posted in: business mix, tech mix
Comments RSS FeedReply
Ttrackback
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
thanx for sharing!
all the best,
@gar
Aha! This is what was bugging our website.
Thanks for sharing this tip.
Rickert Pos
FeatureTalent.nl
what is the conditional statement at point 2? I can’t make it out
not sure which conditional statement you are referring to..?
This worked perfectly on our site; thanks for sharing!
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
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]>–>
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.
The comment above had the HTML stripped – stupid filter. It should be:
<script type=”text/javascript>Cufon.now()</script>
Before the </body> tag
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!
thanks! I couldnt figure out what was wrong- until now!
Fantastic post it did the trick . Thank you thank you you saved me a load of work
Thank you for this informative post ! It solved my problem !
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
Hi Simon,
looks like your CSS might need editing.
Try changing (or applying) styles to the tags you want to have displayed in Cufon.
Thanks for that, it solved my problem!
geeezas, you are a lifesaver!!!!
[…] 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 […]
you’re a lifesaver!! it’s 2.40am… and it’s finally working properly!! thanks a lot!!!
Dude! You’ve rescued me from hours of tearing my hair out – much appreciated.
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!!
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 🙂
Hi mike,
I updated the download with the new version – thanks for your comment!
Nina
cool man , amazing …………
I did this and it worked (minus the updated version you have up there) Thanks a million!
Thanks for the fix – worth also noting that you can use Google Web Fonts!
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!
This works great. I followed the steps and I could solve my problem.
many thanks.
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?
Hi Richard,
I’m sorry, but I have absolutely no idea about asp.net’s inner workings 🙁
Thanks this fixed my problem! It was the .js file for me.
This fixed my problem in just seconds. Thank you.
Perfect! Thanks…what a life saver! 😀
Great post! Thanks for sharing a few solutions. We’re always chasing IE surprises.