internet explorer - IE9 blocks download of cross-origin web font

Question

This is driving me crazy.

Just testing a site on IE9 and discovered that the 'live' version is rendering a web font I am using smaller than on the dev version.

Here is a selection of screen grabs:

I am using the Font Squirrel @font-face kit. As you can see, it is fine on Firefox, Chrome and even IE9 when viewing a local version of the site.

The only difference between the local and live versions is that the font is being loaded from a different domain on the live site (I have set up the cross-domain policy correctly, as illustrated by the fact it works on Firefox and Chrome).

I can't remember what it looked like in IE8 (Microsoft, yet again, haven't thought of developers and have installed IE9 over the top of IE8 with no option to run them simultaneously)

The site is at http://enplanner.com so you can view the source.

Any help on this would be most appreciated - thank you in advance.

Edit: I have removed IE9 and discovered that is looks exactly the same on both local and live in IE8. It appears IE8 has a superior rendering engine that is closer to FF/Chrome than IE9. This is quite a depressing discovery.

Answer 1

IE9 supports .WOFF; IE8 does not, and supports only .EOT fonts.

Open the IE9 F12 Developer Tools and you see the following messages:

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
Neuton-webfont.woff

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
YanoneKaffeesatz-Regular-webfont.woff

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
Neuton-webfont.ttf

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
YanoneKaffeesatz-Regular-webfont.ttf

Examining your HTTP headers, it's clear that your cross-domain access is not configured properly, as there is no Access-Control-Allow-Origin response header on your WOFF files. They're also delivered with the wrong MIME type (text/plain) although that's not causing your problem. However, failure to map woff to the correct MIME type can cause problems as some servers will not serve files with "undefined" extensions and will instead return a HTTP/404 error.