14

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?

bPratik
  • 6,894
  • 4
  • 36
  • 67
UserX
  • 1,228
  • 2
  • 15
  • 28

3 Answers3

21

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;
David Kolar
  • 3,475
  • 25
  • 34
reece
  • 7,945
  • 1
  • 26
  • 28
8

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.

UserX
  • 1,228
  • 2
  • 15
  • 28
  • 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? – Niels Brinch Dec 02 '12 at 23:02
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

Chris Rogers
  • 370
  • 3
  • 22