12

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!

3
  • This should solve your problem stackoverflow.com/questions/7867920/…
    – JoeyP
    Aug 8, 2012 at 20:29
  • As an aside, I've found I like using icomoon.io even more than font-awesome. More precision, smaller files.
    – Jereme
    Oct 18, 2012 at 20:12
  • 1
    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 5, 2013 at 15:46

5 Answers 5

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

5
  • 1
    You may need to "sudo a2enmod headers" and restart Apache before this works. Feb 14, 2015 at 8:08
  • When I add this to my httpd.conf, the Apache will not restart afterwards. Can this break the config somehow?
    – ArtforLife
    Apr 21, 2016 at 19:11
  • @ArtforLife do you see any error message in the log? Apr 21, 2016 at 23:24
  • "Just add the following to .htaccess" - In which directory?
    – gatzkerob
    Oct 31, 2017 at 13:22
  • 1
    Thanks so much. This is a lifesaver.
    – Sackadelic
    Dec 4, 2020 at 16:51
3

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.

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.

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).

1
  • 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, 2020 at 0:29
0

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>

Your Answer

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

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