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