Font awesome not displaying properly on Firefox

Question

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.

Answer 1

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

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