Font Awesome not working in Firefox (possible fix found)

[homerjam]

Hi, when using Font Awesome I've found that in Firefox the characters do not render as they should whilst they work fine in Chrome and Safari.

After some searching around this seems a common issue, I have found this suggestion:

http://blog.netdna.com/opensource/font-awesome-firefox-bug-fix/

Could you possibly add the absolute paths rather than relative paths to the css file?

Many thanks

[bfintal]

I tried this and tested from my branch's raw file, but somehow it doesn't work. And all my fonts now show squares. Have you tried this?

https://github.com/bfintal/cdnjs/blob/font-awesome-ff-patch/ajax/libs/font-awesome/3.0.0/css/font-awesome.min.css

[bfintal]

Maybe adding this to the cdnjs server also would make it work: http://www.wpthemehelp.com/knowledgebase/font-icons-not-working/

[ryankirkman]

Hi Jami,
Thanks for the info. We'll look into it :)

On Thu, Jan 10, 2013 at 10:22 PM, Jami Intal notifications@github.comwrote:

Maybe adding this to the cdnjs server also would make it work:
http://www.wpthemehelp.com/knowledgebase/font-icons-not-working/

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/755#issuecomment-12092131.

[bfintal]

I did some tests and I found a fix.

FF's dev console shows this when loading the font awsome css:

[09:29:21.785] downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/font/fontawesome-webfont.woff @ http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/css/font-awesome.min.css

The server should give the proper headers to allow access (got this from: jsdelivr/bootstrapcdn#27):

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

This should fix the problem. If it still doesn't, then the URLs for the font files in the CSS should also be changed to relative

[ryankirkman]

@bfintal That information is fantastic mate, thanks very much.

[ryankirkman]

@bfintal Thanks to the awesome guys at CloudFlare, this should be all good to go :)

Try hard refreshing your cache and testing. Let me know how it goes.

[bfintal]

Nice it works now! (most probably for IE too). Thanks Ryan and ClourFlare! :)

[homerjam]

Thanks guys. Works a treat.

[Agnox]

Entering the absolute path solved this issue for me. Thanks!

[jayshreehcl]

Well their is one official htacess example provided by maxcdn, it has solution for font awesome and also for speed regarding issues. http://support.netdna.com/tutorials/htaccess-examples/ or check out this guide http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/

But I don't know if it will work when using cloudflare.

[ryankirkman]

Thanks to @terinjokes we now have CORS support!

[rameshchgithub]

Thanks for the nice explanation about font awesome - mozilla problem fixing.
I came across this useful article too...
http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/
Have a look...

[Subhojit1992]

In fonts folder please upload the following files

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
------------------ Important glyphicons files----------------
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Please upload the following files and after that you link your font-awesome.min.css in your header file.

Here is the following link with proper files:
http://goo.gl/WICQAf

[blueror815]

Hi All.
I have found font awesome does not work in FF.
Could you please help me how I should do?

[PeterDaveHello]

@blueror815 if there is no any detail info, how can we help you?

[ajwaldrop]

Thanks all that contributed!!! This fixed it for me bay adding to the .hta file.

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

[PeterDaveHello]

👍 Nice

[akiladevi11]

@Subhojit1992 Thanks, it works. I have downloaded the css & fonts from the given link. It works fine now 👍

[terinjokes]

CDNJS has served Font Awesome font files with Access-Control-Allow-Origin "*" for a while now. I can look into specific cases if more details are given.

[anton-bot]

I am having the same bug with Firefox (works fine in all other browsers). FontAwesome icons display as rectangular boxes with unicode character code inside.

The bug is no longer related to CDNJS and is now a problem in Firefox. FontAwesome files (css and woff) load from CDN just fine with a 200 OK.

The issue is caused by Firefox not displaying Unicode properly when an unusual unicode character such as  is inserted directly into the markup. It works when you use a pseudo element and content, e.g.:

yourelement::before {
    content: '\f067';
    font-family: FontAwesome;
}

[PeterDaveHello]

@j3qq4 Thanks for your report!

[jesuspreethi]

@Subhojit1992 Thank u so much.. with your solution i cleared this issue..

[ipankajthakur]

Can anyone please tell me what to do because my custom fonts are not working in FF even on my local html, showing the same error "downloadable font: download failed (font-family: "gotham_lightregular" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source:" I can not even apply .htaccess code here.

[PeterDaveHello]

@thakurpunk sorry for the late reply, would you please give us the url(s) you have problem (few examples)?

[ameerko2u]

Worked like a charm !
Problem Solved Many thanks :)
Adding this to .htaccess file solved it>
<FilesMatch ".(ttf|otf|woff)$">
Header set Access-Control-Allow-Origin "*"

[hesameto]

hi friends!
copy the HTML form on this page to your index.html :
https://www.bootstrapcdn.com/fontawesome/
goodluck :)