Firefox font problem, other browsers are fine

[Frenchness]

Dear forum. I am close to pulling more hair out.

I am on Windows 7 and use FF 27.0.1. I noticed a problem with Firefox using some fonts: they just don’t show. These are system fonts: Arial Black and Arial Narrow. I tested a font I purchased too: Tungsten. No show in Firefox :(

All fonts work fine in IE, Opera and Chrome.

I tried to solve this mystery by doing research online but I have not found the solution. So I decided to finally ask you. Sigh… What am I missing? I had a migraine yesterday but still :(

Here is my code (just the basics). Arial works. Arial Black, Arial Narrow and Tungsten Book don’t work.

Going quite mad, I thought it might have to do with the quotes acting up in this new Firefox version but desperately checking with Comic Sans worked >:(

CSS

.simple {
    font-family: Arial;
}
.black {
    font-family: "Arial Black";
}
.narrow {
    font-family: "Arial Narrow";
}
.tungsten {
    font-family: "Tungsten Book";
}

HTML

<h1>Test Testing</h1>
<p>Some stuff.</p>
<h1 class="simple">Hurrah</h1>
<h1 class="black">Dammit</h1>
<h1 class="narrow">Darnit</h1>
<h1 class="tungsten">Mince alors</h1>

I am at a loss here. What’s going on? It works fine in all other browsers. Aaaah…

[Frenchness]

Thank you, but I am testing locally, not online (yet). So the fonts should all work. But only Arial does.

[Senff]

There are some known issues with Firefox and (especially) the Arial Narrow font. Long story it seems, here is more info: http://stackoverflow.com/questions/11878088/firefox-not-recognizing-a-font

[Frenchness]

Thank you Senff.
I understand. So the problem lies in the sub styles. The result was all ‘special’ fonts were in Times New Roman. I love running into this problem because I never used Arial Narrow before. If I had not gotten that into my head today (literally thinking ‘what will I use… erm… let’s use the dropdown list… ah, the ‘a’…’) I would not even have noticed the problem with Tungsten so early in the process.

Now the problem with Tungsten also makes ‘sense’.
So to get it working (in case anyone has the same problem):

.arial-black {
    font-family: "Arial Black", Arial;
    font-weight: 800;
}
.arial-narrow {
    font-family: "Arial Narrow", Arial;
    font-stretch: condensed;
}
.tungsten {
    font-family: "Tungsten Book", Tungsten;
    font-weight: 300;
}

It still doesn’t look exactly the same but will do.
Thank you thank you thank you <3

[Author]

Posts