Squared Glyphicons issue with Firefox

Today I just pushed a website on its staging environnement.

Since I use Chrome, I didn’t notice immediately that Twitter Bootstrap Glyphicons were broken under Firefox:

The strange thing is that it works perfectly on my development environnement and not this staging environnement.

So I supposed that the problem come from a configuration difference and it is!

On the development server, there’s no asset-pipeline and no CDN.

Staging is a "production-like" environnement: asset-pipeline with digest on my rails application, assets served using a CDN…

And here is the problem: Firefox doesn’t now allow cross domain fonts.

Since I host the assets on my CDN (just another virtual host to serve static file), I modified the Apache configuration with this workaround (thanks Catalin Rosu):

# For Apache
<FilesMatch "\.(ttf|otf|eot|woff)__aSyNcId_<_qopDbCpt__quot;>
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

This is for Apache server but can be adapted for Nginx.

Note that you have to load mod_headers.c if not already done :

sudo ln -s /etc/apache2/mods-available/headers.load /etc/apache2/mods-enabled/

Restart Apache and everything should work.