Is there a trick to show Arial Black in Firefox?

css firefox bugzilla webfonts font-family
UserX picture UserX · Aug 8, 2012 · Viewed 18k times · Source

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

reece picture reece · Aug 8, 2012

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;

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Targeting only Firefox with CSS

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules: <!--[if IE 6]> ...include IE6-specific stylesheet here... <![endif]--> Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be …

Read More
Custom CSS Scrollbar for Firefox

I want to customize a scrollbar with CSS. I use this WebKit CSS code, which works well for Safari and Chrome: ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } How can …

Read More