CSS3117 in IE9 and IE10: @font-face failed cross-origin request errors

Thoughts from the team
By    | October 24, 2012 | Tips & Tricks,

We’ve recently moved Storm Consultancy to a whole new home, powered by a whole new CMS, and we bet you didn’t notice anything different.

Apart from, that is, if you were using IE9 or IE10 to access the site, where a rather aggressive cross-origin request policy stopped you being able to load the fonts we use across the site, so everything looked rather impact-y.

It turns out, after some debugging in IE10’s new developer tools (more on them coming up this week..) that this is caused by us moving our site assets to a CDN, and IE10 requiring a header to be returned if you want to load fonts from a CDN with a different hostname than the one you load the site with.

All we had to do to fix it was add a few lines to our .htaccess to configure apache to set the Access-Control-Allow-Origin header on our font files, to allow access from our non-CDN’d domain.

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "https://www.stormconsultancy.co.uk"
    </IfModule>
</FilesMatch>

More like this