43

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?

0

4 Answers 4

56

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>
7
  • 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.
    – greggles
    Jul 16, 2013 at 15:12
  • 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). Jul 26, 2013 at 3:30
  • 5
    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? Jul 26, 2013 at 6:44
  • Worked perfectly for me. Thanks Mar 26, 2014 at 4:01
  • Add to woff2: <FilesMatch "\.(ttf|otf|eot|woff|woff2)$"> Mar 17, 2016 at 22:18
16

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

1
  • 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. Jan 4, 2017 at 14:14
9

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.

1
  • 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; } Nov 21, 2016 at 10:30
-1

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

2
  • Waht is this bro ?!
    – Aproram
    Jul 30, 2018 at 19:48
  • 1
    I meant src: url(...) instead of src: uri(...). I've misspelled, sorry. Jul 31, 2018 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.