When it comes to taking my own advice… I suck. I am constantly telling people to use the IE9 F12 developer tools to hunt down and fix issues with their site. So I feel a little stupid that I missed an issue that we were having here on ubelly with IE9 and EOT fonts.
The issue resulted in embedded fonts sometimes not rendering in IE9.
When I opened up the developer tools in IE by pressing F12 I could quickly see the problem: “@font-face failed cross-origin request. Resource access is restricted.”
Our font’s are hosted on http://www.ubelly.com where as the the requests are coming from http://www.ubelly.com. IE9 checks with the server to see if it allows cross domain requests and if it doesn’t it refuses to serve the file.
The browser checks if cross domain requests are allowed by looking at the header “Access-Control-Allow-Origin” that is sent along with the request. To fix this issue all we have to do is amend this header to include the URL of where we are going to be requesting the fonts from.
In our case we will be requesting the fonts from the domain http://www.ubelly.com. We use windows to host our WordPress blog and so use IIS (Internet Information Server) If you are using Apache then the resolution is to add the following to your config file:
<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "http://www.ubelly.com" </IfModule> </FilesMatch>
If you are using IIS then click on HTTP Response Headers
Then add a custom HTTP Response Header with Name as Access-Control-Allow-Origin and a value of the domain where requests for the fonts will be made from.
That’s it… pretty simple.
Currently we are serving up EOT fonts to IE9 the next job will be too add WOFF as these files are smaller and are quicker to load.