FontAwesome does not render on Firefox for Android

Question

enter image description here

Please see above a render of this page (http://www.jungledragon.org/apps/jd3/all/recent) on Firefox for Android, version 28. The problem is instantly visible: all those ugly blocks should be icons coming from the icon font 'FontAwesome'.

This is the only browser in which they do not render. The problem lies somewhere in my setup, since if I visit the FontAwesome website from Firefox for Android, the icons there render just fine. Another useful clue is that the "JungleDragon" logo renders just fine. This is a web font coming from Google.

I have been trying to exclude possible reasons for this failure. Hereby some attempts:

I used to host a copy of FontAwesome on my Amazon S3 account and set up a CORS policy there to allow for cross origin requests. To make sure that this is not a factor at play, I'm now hosting the font on the same domain. It makes no difference.

Next, I changed from relative paths to the font to absolute paths. This too makes no difference.

The site is hosted on Apache, where I added these content types:

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-opentype      .otf
AddType image/svg+xml                    .svg
AddType application/x-font-ttf           .ttf
AddType font/woff                        .woff

That last line used to be different, but I changed it so that it exactly matches the content type of the Google font, which does render. This too makes no difference.

In all attempts, I cleared the cache fully each time, so that's no issue either.

Note that the font renders just fine on other Android browsers (Chrome, Dolphin), as well as on all desktop browser I know, including Firefox.

Here's my font declaration:

@font-face {
  font-family: 'FontAwesome';
  src: url('http://www.jungledragon.org/apps/jd3/type/FontAwesome.eot'); 
  src: url('http://www.jungledragon.org/apps/jd3/type/FontAwesome.eot?#iefix') format('embedded-opentype'), url('http://www.jungledragon.org/apps/jd3/type/FontAwesome.woff') format('woff'), url('http://www.jungledragon.org/apps/jd3/type/FontAwesome.ttf') format('truetype'), url('http://www.jungledragon.org/apps/jd3/type/FontAwesome.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

This is the default way of loading FontAwesome. I changed many variations (such as loading SVG first), all to no avail.

I'm at a total loss now as to why I cannot get this font to render on Firefox for Android.

score 2 · Accepted Answer · answered Mar 22 '14 at 15:22

Using remote debugging I was able to get to Firefox's web console for the device. It turns out Firefox was complaining about CORS. This is strange, since the font is hosted on the same domain as the page. Still, by enforcing a CORS headers from PHP, I was able to resolve the issue.

FontAwesome does not render on Firefox for Android

1 Answers1