20

In Firefox (Windows 7), icons and glyphs that are called from the Font Awesome package do not render properly. An example of this can be seen on the Khan Academy website. Below the video the icons are shown as boxes with hex codes in them. This means that it isn't getting downloaded by Firefox.

How the icons appear in Firefox

How it appears on Chrome (Windows 7), Safari (Mac OS X) and Stainless (Mac OS X):

How the icons appear in other browsers

I found this question on Stack Overflow that may explain why this happens -- the CSS does use single quotes to enclose the font's src location. However, I don't have any write access to Khan Academy servers so I can't modify the actual website. I want to know if this can be fixed in Firefox, and how. I can run Greasemonkey scripts if that would help. I've already tried manually downloading the font and adding it to Windows' Fonts folder but this does not help.

For reference, the CSS that sets this font up (not processed properly by Firefox) is:

@font-face
{
  font-family:'FontAwesome';
  src:url('./fontawesome-webfont.eot');
  src:url('./fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
      url('./fontawesome-webfont.woff') format('woff'),
      url('./fontawesome-webfont.ttf') format('truetype'),
      url('./fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight:normal;
  font-style:normal
}

[class^="icon-"]:before,
[class*=" icon-"]:before
{
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  text-decoration:inherit
}

Update: I found that Firefox correctly displays the font-based icons in Font Awesome package's website (linked above). Upon inspection of CSS and comparison with Khan Academy's CSS, I find that both codes are exactly the same except there is no semicolon after the last attribute for KA's CSS (if you ignore the fact that it's compressed). Does the lack of semicolon cause this problem?

Community
  • 1
ADTC
  • 2,954
  • 3
  • 30
  • 49
  • 2
    It seems someone has voted to close this question. I would like to know why. I believe this question in very relevant to Super User (a website to get help with computer troubles) and must not be closed. – ADTC Jul 07 '12 at 17:53
  • 1
    I'm voting to close @ADTC because this is an issue more with khancademy not properly doing the research of the compatibility of their site and not a question that can be solved here. – James Mertz Jul 07 '12 at 22:51
  • 1
    If you can show other sites using Font Awesome with the same issue and not just Khan Academy then it could be reopened as a Firefox issue – random Jul 08 '12 at 18:46
  • 4
    It's sad that simply because I unwittingly tied the problem to the website instead of keeping it purely Firefox/CSS problem from the beginning, _now_ it's not getting merit **even after** rewording it to untie it from the website and make it purely Firefox/CSS problem. Anyway I have added a counter-example as an update at the end, it may show what the problem is. – ADTC Jul 09 '12 at 06:31
  • Given your update about the missing semi-colon, this is too localised to Khan Academy's slopping coding. You'll have to email them and get them to fix it if they bother – random Jul 09 '12 at 16:28
  • 1
    The question (which I forgot to ask in the edit) is whether the missing semicolon actually causes Firefox to misread the CSS - or this could be some other problem. – ADTC Jul 09 '12 at 17:04
  • 5
    I am disappointed with the arrogance combined with lack of understanding here. The issues is actually that Font Awesome will fail in Firefox any time the request for the font file is cross-domain. In other words on any site that uses a CDN to distribute static files. – jasonrr Jul 10 '12 at 23:49
  • Your edit about the . prefix is a server issue, not how Firefox handles files. KA were referencing the font files from the wrong location – random Jul 12 '12 at 16:44
  • 3
    "KA were referencing the font files from the wrong location" **Incorrect!** The fonts worked correctly in three other browsers as I had already mentioned in question long ago, which means the fonts were in the correct location. It was clearly Firefox's problem with the `./` path as I explained, which forced KA to move the font files to a new location that doesn't need `./`, allowing Firefox to also read the font files correctly. Therefore it _is_ an issue of how Firefox handles files. You are wrong. – ADTC Jul 12 '12 at 17:03
  • 1
    @ADTC please move your update to an answer. – Sathyajith Bhat Jul 14 '12 at 11:52
  • _Does the lack of semicolon cause this problem?_ No, it's part of the spec to not require a semicolon on the last item in a semicolon separated list. It is good practice though to put the semicolon there so you don't add another item to a selector and wonder why things don't work because the previous item is missing the semicolon separator. – Fiasco Labs Jul 14 '12 at 21:02
  • 1
    @FiascoLabs Please see my answer. The problem was **not** caused by the lack of semicolon in the CSS. – ADTC Jul 14 '12 at 21:38
  • I have this problem for few days ago. The solution is simple : navigate about:config , find "gfx.downloadable_fonts.enabled" and make sure it's value is "true". – cakyus May 11 '19 at 07:48

3 Answers3

12

The problem described in the question was fixed by Khan Academy by changing all the paths from ./ to /fonts/ (for example ./fontawesome-webfont.ttf changes to /fonts/fontawesome-webfont.ttf). It seems to me that Firefox is unable to read files from the special "dot" directory (which simply refers to the current directory).

PS: The lack of semicolon in the CSS after the last attribute does not cause this problem.

Additional comments:

Your edit about the . prefix is a server issue, not how Firefox handles files. KA were referencing the font files from the wrong location – random

Incorrect! The fonts worked correctly in three other browsers as I had already mentioned in question long ago, which means the fonts were in the correct location. It was clearly Firefox's problem with the ./ path as I explained, which forced KA to move the font files to a new location that doesn't need ./, allowing Firefox to also read the font files correctly. Therefore it is an issue of how Firefox handles files.

Community
  • 1
ADTC
  • 2,954
  • 3
  • 30
  • 49
  • This answer was created as per request of [Sathya](http://superuser.com/users/4377/sathya) in the comment stream below question. – ADTC Jul 14 '12 at 20:17
  • 2
    Note that this Firefox problem also affect paths starting with `../`. – Ben Dec 12 '12 at 20:00
1

Probably not the answer to the posed question, but related enough to help people that end up here with a slightly different problem that produces the same result as shown in the screenshots.

Firefox blocking the use of a font that is on a different (sub-)domain

Also read the comments on that posts, they give good advice.

mprill
  • 870
  • 6
  • 12
Pim Schaaf
  • 119
  • 3
0

I did the path changes to run IE, Firefox and Chrome correctly, as follows: (URL to see)

@font-face{
  font-family:'FontAwesome';
  src:url('ogi/bete/font/fontawesome-webfont.eot?v=3.0.1');
  src:url('/ogi/bete/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), 
  url('/ogi/bete/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('ogi/bete/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal }
Herson Tamin
  • 1
  • 1