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?

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
dolarsrg
  • 905
  • 1
  • 9
  • 10

4 Answers4

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>
Ryan McDonough
  • 9,732
  • 3
  • 55
  • 76
  • 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 '13 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). – Ryan Parman Jul 26 '13 at 03: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? – Ryan McDonough Jul 26 '13 at 06:44
  • Worked perfectly for me. Thanks – Jiminy Cricket Mar 26 '14 at 04:01
  • Add to *woff2*: `` – Thiago Pereira Mar 17 '16 at 22:18
  • 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. – Hussnain Cheema Oct 20 '16 at 19:09
  • I had to add mod_headers to my apache: `sudo a2enmod headers` + restart apache – Paulin Trognon Dec 01 '17 at 15:06
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

thanh
  • 426
  • 7
  • 16
  • 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. – Captain Cranium Jan 04 '17 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.

matt hias
  • 91
  • 1
  • 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; }` – Tobin Thomas Nov 21 '16 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");.

Tom
  • 4,666
  • 2
  • 29
  • 48
Carlos Martínez
  • 199
  • 1
  • 5