Font awesome not working in Firefox

Question

I'm using bootstrap and I added font awesome through Less, overriding the Glyphicons. The icons display OK in chrome but in Firefox i just see boxes.

This is how my directory looks like

-- Project
  -- js
  -- css
  -- less
  -- font-awesome
    -- css
    -- font
    -- less

All I've modified in the Project > less > boostrap.less file has been:

@import "sprites.less";

//for this line

@import "../font-awesome/less/font-awesome.less";

As I said in Chrome works fine but for some reason Firefox shows only boxes.

yeah, with what @ShankarCabus said. You'll want to look into how to use CORS with what ever server you're working with. You might need to set some headers with `Access-Control-Allow-Origin` to be `*` or whatever the domain is. — jeremywoertink, Jun 12 '13 at 20:28

score 28 · Accepted Answer · edited Dec 15 '19 at 14:42

28

Custom web fonts via CDN (or any cross-domain font request) doesn't work in Firefox or Internet Explorer (correctly so, by spec) though they do work (incorrectly so) in Webkit-based browsers.

You can fix this by adding headers to your page.

Apache

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

Nginx

if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}

Credit: http://davidwalsh.name/cdn-fonts

edited Dec 15 '19 at 14:42

Abdullah Khan

12,010
6
65
78

answered Jun 26 '13 at 16:57

Dustin Brownell

817
7
10

Any solution for IIS ? – Phill Healey Feb 04 '14 at 19:33
4

I dont understand. How is one supposed to change the headers in Apache, if the files are being loaded from a remote CDN? (I know the OP is loading locally, but you appear to be talking about CDNs) – Jeff Feb 14 '14 at 14:09
2

It's easier and faster just setting : "" Using you method @Dustin Brownell it doesn't works locally in a html projects. – Despertaweb Oct 23 '14 at 11:13
@Blackersoul : It won'twork unless local html project is served through some kind of server, under ```http://localhost``` – Gelmir May 27 '15 at 14:20
Its just as the comment above says. It won't display unless your project is served through some kind of server. As soon as i deployed my project locally the icons appeared just as they did on chrome. – JPG Sep 12 '19 at 14:28

score 24 · Answer 2 · answered Oct 21 '13 at 01:32

24

If you want a quick and easy way to make Font-awesome work, try using CDNJS. It's free and powered by CloudFlare. CORS is supported out of the box.

Try something like this:

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

answered Oct 21 '13 at 01:32

premjg

582
5
12

Premjg it worked perfectly for me - whereas fiddling with httpd.conf did nothing to solve my problem. This was indeed the simplest solution! – Max May 13 '14 at 08:51
1

This should be the chosen answer since it works in many other situations (I'm building my site with jekyll) – Heisenberg Nov 01 '14 at 22:23
In a commercial project which is security is important (such as bank website), you don't want to use CDNs at all unless you want customer's browser send referrer to 3rd party websites. – AaA Sep 30 '19 at 09:42

score 10 · Answer 3 · answered Aug 08 '13 at 15:27

10

If you are hosting the font on S3, you have to enable CORS on the bucket. Through AWS Management Console, edit the properties for the bucket and under Permissions click on "Add CORS Configuration". In my case, if I left the default config, it still didn't work, so I changed it to:

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

answered Aug 08 '13 at 15:27

Ruy Diaz

3,084
24
36

Here is a good link I found on how to do this: https://support.cloudflare.com/hc/en-us/articles/200168926-How-do-I-use-CloudFlare-with-Amazon-s-S3-Service- – campeterson Jan 10 '14 at 18:50

score 6 · Answer 4 · answered Jul 22 '13 at 11:58

6

I was having issue with the if statement because I didn't have a $filename variable.

But I did have similar results using:

location ~ /\.(eot|otf|ttf|woff)$ {
        add_header Access-Control-Allow-Origin *;
    }

answered Jul 22 '13 at 11:58

jamboNum5

275
2
11

1

I am using Nginx 1.4 and this was the better approach than the `if` statement. – Rob Di Marco Jan 13 '14 at 14:15

score 4 · Answer 5 · edited Oct 22 '17 at 19:04

4

Using a CDN as premjg suggested is the least invasive method besides hosting it yourself. The latest version of fontawesome suggests bootstrapcdn, e.g.,

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

As a minor note, noscript silently blocks requests to the CDN unless whitelisted, and it won't prompt you to whitelist the CDN unless your page also requests JS files from the same domain.

edited Oct 22 '17 at 19:04

seven-phases-max

11,765
1
45
57

answered May 23 '14 at 06:25

A Lee

7,828
4
35
49

1

@FirstLast - I reverted your edit since unconditional forcing of 'htpps` protocol is not always a good idea (learn what is "impicit protocol URL"). – seven-phases-max Oct 22 '17 at 19:05

score 1 · Answer 6 · answered Aug 05 '13 at 14:48

If you're like me, modifying a web.config file is something you're not allowed to touch.

Try storing all the font files (.eot, .ttf, etc) into their own local folder, and link to them locally instead of the FontAwesome CDN. Cleared it up in IE and FF for me every time.

@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }

score 0 · Answer 7 · answered Aug 11 '14 at 02:22

If you're using wordpress and you think you've tried everything, look and see if you ever installed a Font Awesome plugin. Disable the plugin and refresh in Firefox.

This was the solution for me - the plugin's older version of font-awesome was overriding the files I was trying to update myself manually.

score 0 · Answer 8 · answered May 01 '15 at 01:32

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

Font awesome not working in Firefox

8 Answers8

Linked