Firefox not loading web font: how to fix it

This article discuss about the issue I have experience while developing Cyan app, which hosts all assets on a CDN (Rackspace Cloud Files).

Although the font was loading fine on Chrome and Safari, Firefox was failing to load the font file, which showed as a 0KB GET request in the developer console.

After investigation, it seems like Firefox is applying HTTP Access Control to web fonts, in the same way as it does for AJAX requests. The key is to add a cross domain header to our font files, to bypass this security restriction.

Fixing the issue

The Rackspace Cloud Files interface allows the modification of file headers. So we will need to add the following header to our font files:

Access-Control-Allow-Origin: *

The "*" will allow the request to be accepted from any other domain.

Self managed server configuration

If you are not using a CDN to host your assets but have access to the server config that serve those files, you should be able to specify those headers for a selection of file extension.

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

This Q&A on StackOverflow shows a way to do so on Apache: http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie

< / >