CSS3117 in IE9 and IE10: @font-face failed cross-origin request errors
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>