12

I am trying to use a font awesome icon in a widget that is installed on a customers website. The font awesome icons displays correctly in Safari and Chrome but doesnt in Firefox. However, it still displays correctly in Firefox when previewing it on our site. Does this have something to do with how Firefox displays third party fonts across domains?

Any ideas would be greatly appreciated. Thanks.

Note: This was tested using Firefox V9 and above.

merv
  • 67,214
  • 13
  • 180
  • 245
acmeyer9
  • 315
  • 1
  • 2
  • 13

8 Answers8

5

Firefox only allows cross-domain linking of fonts if the server the font is on sends the right CORS headers. And it does this because the spec very clearly says to do it, at http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • maybe dumb question but how do i send the right header (specifying access-control-allow-origin *) for just those font files? Also I am using a rails app and not apache server. Thanks. – acmeyer9 May 18 '12 at 14:32
  • I don't know how one would go about sending the right headers in your particular server setup, sorry... – Boris Zbarsky May 18 '12 at 18:15
  • I'm having the same issue and I seem to be setting the Access-Control-Allow-Origin header correctly, but it's still not working which makes me think I'm doing it wrong. Can someone provide an example of how this should work? – Andrew Jul 19 '12 at 20:28
  • 1
    I think I've figured out that the domain that is serving the font files is the one that needs to set the header. – Andrew Jul 19 '12 at 20:50
  • `` can be used to set headers in php files – Alin Razvan Jan 26 '15 at 14:21
2

I notice a strange behaviour, probably related to the firefox security policies. I had the same problems with a project configuration like so:

  • /site/html <--- where all the .html files go
  • /site/resources/... <--- where all the css, font, img, js stuff goes

now, I included the font-awesome.min.css in an html file located under the /site/html directory and I experimented your problem. But when you download the Font Awesome package it is shipped with html demo files that actually works in firefox. What's the trick?!

Their project structure has the "resources" folder (they call it "assets") nested inside the "html" folder. This seems to calm down the firefox security policy. Finally, my answer is: get a configuration like the following

  • /site/html <--- where all the .html files go
  • /site/html/resources/... <--- where all the css, font, img, js stuff goes

it worked for me.

MaVVamaldo
  • 2,505
  • 7
  • 28
  • 50
1

If you are hosting your font on S3, you have to enable CORS on the bucket. See my answer to this other question for details

Community
  • 1
  • 1
Ruy Diaz
  • 3,084
  • 24
  • 36
1

MaxCDN identified and fix this issue. They set the right CORS headers and embedding this line to your website should work:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Oriol
  • 11,660
  • 5
  • 35
  • 37
0

Firefox blocks Cross-Origin Request.

Firefox disallows reading the remote resource due to Same Origin Policy for below CDN:

https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css

I dug little to fix CORS issue instead I replaced above CDN with below one and icons rendering fine:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">

Moin Haidar
  • 1,654
  • 1
  • 16
  • 16
0

Use direct link for including css files , also make sure you don't get a cross-domain error in the debugging console .

For example when you access your website from :

http://www.domain.tld make sure you link css file from the same path including www

like so : http://www.domain.tld/css/style.css

and when you access from http:// > link css files also from that very same path without www.

http://domain.tld/css/style.css

i got that issue some time ago and it was fixed by modifying css paths to request css files from the "same" web address / path .

example: you can view font awesome icons in this path

http://webake.ro/

But not in this one :

http://www.webake.ro/

because the font was linked from within http://domain.tld path without adding www. in the

link href=

Font from origin 'http://webake.ro' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.webake.ro' is therefore not allowed access.

Alin Razvan
  • 1,451
  • 13
  • 18
0

Turn your fonts into base64 and include through CSS. This way you push the fonts through the browser code and the font files are not downloaded in the usual fashion needing cross domain permissions. This is also a DISA STIG issue to disable downloadable fonts but probably not your issue here. The solution can be seen at this post and also copied here:

You just need to Base64 the font and include it in a CSS file. Make sure to remove your call to the downloadable WOFF file once you include the call to the new FontAwesomeB64.css

Use https://www.base64encode.org/ to encode the WOFF Font-Awesome font file.

Edit the the resulting file and add these lines. When you get to the src:url line, make sure to run that right into the base64 information you received (don't use the greater than and less than signs I show here.) At the end of that base64 information add the single quote, parentheses, a semi-colon, and curly brace to finish:

@font-face { 
font-weight: 400;
font-style: normal;
font-family: 'FontAwesome';
src:url(data:application/x-font-woff;base64,<insert base64 code here>);}

You now have a base64 CSS file of the Font-Awesome font that bypasses all font download denial settings in browsers.

I've found that this works with all fonts, a little heavier on the download but worth the guarantee of functionality.

TadLewis
  • 141
  • 9
-2
@font-face{font-family:'FontAwesome-webfont';

trust me, this really works.

Bohemian
  • 412,405
  • 93
  • 575
  • 722
Ding Arne
  • 11
  • 2