Downloadable font on firefox: bad URI or cross-site access not allowed

amazon-s3, cross-domain, css, font-face, gecko

Solution

On your server you will need to add:

Access-Control-Allow-Origin

To the header of the font files, so for example if you are using Apache you can add this to the .htaccess:

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

Problem

I'm a webmaster at http://www.beperk.com (I'm giving you the URL so you are able to check the problem) and I'm having lots of problems using @font-face in CSS. I want to use the foundicons from zurb dot com so I hosted them at Amazon S3. I set up the bucket to allow crossdomain access as specified here: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors And everything started to work seamless at webkit, trident and gecko... mostly: when browsing the web with firefox (version 17, 18 and 19 tested) all the icons fails randomly with this error: ``` Timestamp: 22/02/13 13:18:01 Error: downloadable font: download failed (font-family: "GeneralFoundicons" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed ``` And I say randomly since after a full reload of the page (with control/command + R) every single icon appears normally to fail again after some visits. Can anyone find the problem?

Original source