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?

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;

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.

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