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

Question

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?

Emplane

Answer 1

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>

Fda

I'm using a CDN to serve my files and have added this header to the origin webserver. The CDN is configured to use the same headers as the origin and indeed "Access-Control-Allow-Origin: *" is in the headers of both when I pull the file using "curl -I". And yet...Firefox still won't load those font files. – Pillow

The CDN would need to support Origin: Vary for this to work. Unfortunately CloudFront doesn't — if that's what you're using (you didn't say). – Timber

Originally he was using S3, so just general storage for these files, which as we know isn't really a CDN - and tends to be slower. Is there a workaround for CloudFront? – Fda

Add to woff2: <FilesMatch "\.(ttf|otf|eot|woff|woff2)$"> – Teach

Worked perfectly. Thanks alot. I have a WordPress site on my domain. I added .htaccess file containing above code in the same folder where my font files are present. – Zampino

I had to add mod_headers to my apache: sudo a2enmod headers + restart apache – Joinder

Answer 2

If anyone are using local resource and facing this problem in firefox. You can go to about:config and change the security.fileuri.strict_origin_policy preference to false.

see : https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs

Schumacher

Splendid! Instantly solved what seemed like a massively weird Webfonts problem within what is currently a local development experiment, which was not an issue of any sort with Chrome, IE or Opera. – Reynalda

Answer 3

try to use implemented base64-encoded fonts like:

@font-face {
 font-family:"font-name";
 src:url(data:font/opentype;base64,[paste-64-code-here]);
 font-style:normal;
 font-weight:400;
}

see: http://sosweetcreative.com/2613/font-face-and-base64-data-uri

it worked perfectly.

Respondent

here is my code, how to integrate @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100; src: local('Roboto Thin'), local('Roboto-Thin'), url(fonts/roboto/gwVJDERN2Amz39wrSoZ7FxTbgVql8nDJpwnrE27mub0.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } – Sulphone

Answer 4

I resolved the problem in Firefox (local resource access problem) using url: src: url("../fuentes/EurostileLTStd.otf"); instead of src: uri("../fuentes/EurostileLTStd.otf");.

Rabblerousing

Waht is this bro ?! – Feuillant

I meant src: url(...) instead of src: uri(...). I've misspelled, sorry. – Matthieu