Firefox not recognizing a font

Question

I'm styling the pre HTML element via CSS like this:

pre {
    font-family : "Franklin Gothic Medium","Arial Narrow Bold","Arial",sans-serif;
}

And it works in Chrome/Chromium, Opera, Safari and IE (meaning that the font is indeed installed in the computer), but not in Firefox. Firefox only recognizes Arial.

And I've tried with other custom fonts (like Century Gothic) and it works, so it's able to recognize custom fonts.

Bottom line, Firefox isn't recognizing Franklin Gothic Medium nor Arial Narrow Bold even though

• they are installed in the computer
• it's able to recognize other custom fonts

What might be going on here?

Solution 1

The solution is not straightforward. Font appearance varies by browser, OS, and of course by which fonts are available on the client's system. Don't take this answer at face value without further testing based on your target audience.

On Windows, ever since Firefox 4 and IE9, fonts are rendered using DirectWrite instead of GDI. Since this change, fonts like "Arial Narrow" and "Arial Black" are considered part of the Arial family and not as standalone families. So in Firefox, you access Arial Narrow through the regular Arial declaration with some modifiers. IE9 works in a similar fashion, but seems to have some pragmatic cheats baked-in that makes it work in the way developers have been used to.

Franklin Gothic Medium

font-family: "Franklin Gothic Medium", "Franklin Gothic", sans-serif;

All browsers except Firefox understand "Franklin Gothic Medium". Firefox doesn't and goes on to the next choice, "Franklin Gothic", which you might not even think you have, but that is where "Franklin Gothic Medium" is living in the DirectWrite world. In the absence of any other modifiers (italic, bold, stretch), my Firefox grabs "Franklin Gothic Medium" when "Franklin Gothic" is specified.

Arial Narrow Bold

font-family: "Arial Narrow Bold", "Arial Narrow", "Arial", sans-serif;
font-stretch: condensed;
font-weight: 700;

Some browsers, like Chrome and IE7–8 recognize "Arial Narrow Bold". But IE9 and Firefox do not. IE9 does recognize "Arial Narrow". Firefox falls down to Arial. font-stretch: condensed tells Firefox to use the "Arial Narrow" version of Arial, and font-weight: 700; tells both IE9 and Firefox to use to the "Arial Narrow Bold" version as far as I can tell. Font weights of 600, 700, 800, and 900 are triggering the bold for me.

Franklin Gothic Medium with Arial Narrow Bold fallback

Now you've got a Catch-22.

font-family: "Franklin Gothic Medium", "Franklin Gothic", "Arial Narrow Bold", "Arial Narrow", "Arial", sans-serif;

If Firefox can find "Franklin Gothic" you are fine, but if it can't then it will fall back to "Arial". If you use font-stretch: condensed; font-weight: 700; to turn that into "Arial Narrow Bold", you will affect the appearance of Franklin when the Arial fallback is not used. Every browser will apply the font-weight rule to Franklin if Franklin is available—not what you want at all. If you use font-stretch: condensed and Firefox has access to Franklin, it will dutifully condense it. (I didn't see that in any other browser.) In your particular situation, I would count on Firefox getting Franklin and accept that regular Arial will be used as the fallback. But adding "Franklin Gothic" (for FF) and "Arial Narrow" (for IE9) is going to help a lot.

(At the time of writing, Chrome is at version 21 and Firefox is at version 14.)

Solution 2

If you can't find a solution, go the CSS3 font route. http://www.w3schools.com/css/css3_fonts.asp