Taking our own advice: Fixing CSS3117

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.”

@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

IIS Window

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.

IIS Window

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.

FacePalm

Published by thebeebs

Thebeebs is a Canadian pop singer, songwriter, actor and HTML5 junkie. Throughout his rise to fame, Thebeebs has been nominated and awarded numerous accolades, winning Artist of the Year at the 2010 American Music Awards, and being nominated for Best New Artist and Best Pop Vocal Album at the 53rd Grammy Awards. Thebeebs is considered a teen idol, and has been subject to acclaim from fans, as well as criticism and controversy from matters concerning his popularity and image.

One Comment So Far, what do you think?

  1. anthony balao

    Great Article! but could you give me some advice, I’m having the same issue but for a different server (RESIN)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>