Is there a trick to show Arial Black in Firefox?

Question

Since Arial black is buggy in firefox, is there a way to show it without embedding it with @font-face?

https://bugzilla.mozilla.org/show_bug.cgi?id=644385

I've seen a couple of work arounds like using

font-weight: 900;
font-family:'Arial Black', Gadget, sans-serif;

However that method does not work for me. Suggestions?

Elfie

Answer 1

The problem (according to the bug) is that the Windows DirectWrite API that Firefox uses treats Arial Black as font-family: Arial; font-weight: bold; (comment #8), so according to comment #10 you need to use:

font-family: "Arial Black", Arial;
font-weight: 900;

Tobacconist

Still doesn't work. I tried to put quotes around it too, but no luck. – Elfie

Answer 2

Seems like the best solution right now is to use font-face to check if the font exists on the local machine. I guess this is better than uploading the font to Font Squirrel and generating a bunch of files to embed.

@font-face {

    font-family: 'arial-black';
    src: local('Arial Black');

}


#nav {

font-family:"Arial Black", arial-black, sans-serif;

}

It will call Arial Black like a normal web safe font and if that doesn't work (Firefox in this case), it will fallback for font-face to look for it in the local machine.

If anyone has a better method, please feel free to post it.

Elfie

What should you do if you still want to fall back to another font in case Arial Black really isn't on the local machine? – Pronty

Answer 3

Arial Black is the 900 weight of the Arial family. So use Arial within your font-family for use in Firefox as shown below:

font-family:"Arial Black", Gadget, Arial, sans-serif;
font-weight: 900;

This is reported in bugzilla.mozilla.org

Valina