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?

3 Answers 3

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;
1
  • Still doesn't work. I tried to put quotes around it too, but no luck.
    – UserX
    Commented Aug 8, 2012 at 9:37
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.

1
  • 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? Commented Dec 2, 2012 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.