Font-awesome not properly displaying on Firefox / how to vend via CDN?

Question

I can't get font-awesome to display properly in firefox, even in localhost. I'm receiving the following cross domain error:

Timestamp: 08/08/2012 02:49:37 PM
Error: downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal     `src index:2): bad URI or cross-site access not allowed
source: http://localhost:3000/djpsite/baseadmin/font/fontawesome-webfont.ttf
Source File: http://localhost:3000/djpsite/baseadmin/css/font-awesome.css
Line: 0
Source Code:
@font-face {   font-family: "FontAwesome";   font-style: normal;   font-weight: normal;   src: url("../font/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../font/fontawesome-webfont.woff") format("woff"), url("../font/fontawesome-webfont.ttf") format("truetype"), url("../font/fontawesome-webfont.svg#FontAwesome") format("svg"); }

I used double quotes as suggested by this post: firefox @font-face fail with fontawesome but that didn't resolve the problem.

Everything works fine in Chrome; any suggestions?

Beyond fixing the problem in Chrome, how should I vend font-awesome over a CDN given this restriction: http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction?

Below is the code from my CSS file:

@font-face {
    font-family: 'FontAwesome';
    src: url("../font/fontawesome-webfont.eot");
    src: url("../font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'),
    url("../font/fontawesome-webfont.woff") format('woff'),
    url("../font/fontawesome-webfont.ttf") format('truetype'),
    url("../font/fontawesome-webfont.svg#FontAwesome") format('svg');
    font-weight: normal;
    font-style: normal;
}

Thanks for your help!

This should solve your problem http://stackoverflow.com/questions/7867920/safe-to-allow-webfonts-to-be-loaded-from-subdomains-in-apache — JoeyP, Aug 08 '12 at 20:29
As an aside, I've found I like using http://icomoon.io/ even more than font-awesome. More precision, smaller files. — Jereme, Oct 18 '12 at 20:12
For anybody else stumbling here, the link by JoeyP above has been removed. The answer by styu below works if your FF error console shows "Downloadable font download failed" due to cross origin issues and you are running an Apache webserver. — Phil, Apr 05 '13 at 15:46

István Ujj-Mészáros · Accepted Answer · 2017-03-15T16:30:03.120

22

This solved the Firefox cross domain font issue for me (which causes the font to not load in Firefox). Just add the following to .htaccess or directly to apache config:

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

There is a webpage with instructions on how to set up CORS with different servers: https://enable-cors.org/server.html

edited Mar 15 '17 at 16:30

answered Jan 13 '13 at 21:30

István Ujj-Mészáros

3,228
1
27
46

1

This just saved me! Thanks – paul.ago Feb 20 '13 at 08:38
1

You may need to "sudo a2enmod headers" and restart Apache before this works. – Gaurav Gupta Feb 14 '15 at 08:08
When I add this to my httpd.conf, the Apache will not restart afterwards. Can this break the config somehow? – ArtforLife Apr 21 '16 at 19:11
@ArtforLife do you see any error message in the log? – István Ujj-Mészáros Apr 21 '16 at 23:24
"Just add the following to .htaccess" - In which directory? – gatzkerob Oct 31 '17 at 13:22
1

Thanks so much. This is a lifesaver. – Sackadelic Dec 04 '20 at 16:51

spikyjt · Answer 2 · 2016-07-27T12:46:01.523

I've usually found adding a local declaration fixes this, as per this. e.g.:

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
}

I'm sure the Apache config method is more correct, however you may not be using Apache or may not have the ability to make such overrides.

score 2 · Answer 3 · answered Jun 12 '13 at 20:30

2

If you're building a rails app (or some other rack based app) take a look at https://github.com/cyu/rack-cors Super easy to get up and running. You can throw it into application.rb or one of the environment files.

answered Jun 12 '13 at 20:30

jeremywoertink

2,281
1
23
29

score 2 · Answer 4 · answered Aug 04 '13 at 17:33

2

If you're using AWS Cloudfront as in my case, you'll need to add a CORS Policy. S3 intentionally won't allow you to set the headers during upload because you need to use the policy instead.

This policy configuration should do the trick for you:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

This will get Font-Awesome working from a CDS on Firefox and Internet Explorer (IE).

answered Aug 04 '13 at 17:33

Joseph Lust

19,340
7
85
83

Doesn't this then also open the floodgates for hotlinking? Having a similar issues for DigitalOcean Spaces Bucket where images and the webfonts are at. Still learning about CORS but allowed origins ** (all) sounds risky to me. – rhand Jun 28 '20 at 00:29

score 0 · Answer 5 · answered Feb 24 '17 at 06:25

I was having the same issue on magento 2.0. It was working fine on https but not on http. In order to allow font-awesome icons to load on http. I added following in the .htaccess situated on root directory of magento installation.

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Font-awesome not properly displaying on Firefox / how to vend via CDN?

5 Answers5

Linked