Font-Weight:900 Only Working in Firefox

font-weight:900 only working in Firefox

It depends on the font. The weight has to be available within the font displayed, or the browser will pick the closest available weight.

Helvetica must not have all of those weights embedded within the font file.

Read about it more here: https://developer.mozilla.org/en/CSS/font-weight

It says:

100, 200, 300, 400, 500, 600, 700, 800, 900

Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

Perhaps the different browsers have different rules about how to treat font weights when the weight is unavailable.

Firefox 5 doesn t render style font-weight: 900

It works for me: http://jsfiddle.net/6Trxg/2/

Edit: If you're expecting 900 to be bolder than bold then that's not guaranteed to work - the spec says:

"There is no guarantee that there will be a darker face for each of the 'font-weight' values; for example, some fonts may have only a normal and a bold face [...] There is no guarantee on how a UA will map font faces within a family to weight values. The only guarantee is that a face of a given value will be no less dark than the faces of lighter values."

font-weight is not working properly?

Its because the font size (9px) is too small to display bold. Try 11px or more and it works fine.

Chrome not respecting font weight?

Arial (at least the standard version) only has two weights: normal and bold. If you specify a weight that is not one of those two, the browser will pick the closest available weight. (See: font-weight:900 only working in Firefox)

Arial Black is a separate font from Arial, which is why the semi-useful answer you provided works.

If you want to work with Arial, try:

#one { font-weight: normal; }
#two { font-weight: bold; }
#three { font-family: "Arial Black", Arial, sans-serif; }

The other alternative is to use a webfont service like Typekit or Webink, and pick a font with more available weights.

Font weight value is not working properly

This has nothing to do with the CSS you provided and more to do with the font in question (which you did not specify).

Take this font, for example. It has 400 (normal), 600, 700 (bold), 800, and 300 font weight styles.

As stated by CSS-Tricks:

In order to see any effect using values other than 400 or 700, the font being used must have built-in faces that match those specified weights.

In short, if you are not happy with the font-weight available, try using a different font.

Firefox not recognizing a font

The solution is not straightforward. Font appearance varies by browser, OS, and of course by which fonts are available on the client's system. Don't take this answer at face value without further testing based on your target audience.

On Windows, ever since Firefox 4 and IE9, fonts are rendered using DirectWrite instead of GDI. Since this change, fonts like "Arial Narrow" and "Arial Black" are considered part of the Arial family and not as standalone families. So in Firefox, you access Arial Narrow through the regular Arial declaration with some modifiers. IE9 works in a similar fashion, but seems to have some pragmatic cheats baked-in that makes it work in the way developers have been used to.

Franklin Gothic Medium

font-family: "Franklin Gothic Medium", "Franklin Gothic", sans-serif;

All browsers except Firefox understand "Franklin Gothic Medium". Firefox doesn't and goes on to the next choice, "Franklin Gothic", which you might not even think you have, but that is where "Franklin Gothic Medium" is living in the DirectWrite world. In the absence of any other modifiers (italic, bold, stretch), my Firefox grabs "Franklin Gothic Medium" when "Franklin Gothic" is specified.

Arial Narrow Bold

font-family: "Arial Narrow Bold", "Arial Narrow", "Arial", sans-serif;
font-stretch: condensed;
font-weight: 700;

Some browsers, like Chrome and IE7–8 recognize "Arial Narrow Bold". But IE9 and Firefox do not. IE9 does recognize "Arial Narrow". Firefox falls down to Arial. font-stretch: condensed tells Firefox to use the "Arial Narrow" version of Arial, and font-weight: 700; tells both IE9 and Firefox to use to the "Arial Narrow Bold" version as far as I can tell. Font weights of 600, 700, 800, and 900 are triggering the bold for me.

Franklin Gothic Medium with Arial Narrow Bold fallback

Now you've got a Catch-22.

font-family: "Franklin Gothic Medium", "Franklin Gothic", "Arial Narrow Bold", "Arial Narrow", "Arial", sans-serif;

If Firefox can find "Franklin Gothic" you are fine, but if it can't then it will fall back to "Arial". If you use font-stretch: condensed; font-weight: 700; to turn that into "Arial Narrow Bold", you will affect the appearance of Franklin when the Arial fallback is not used. Every browser will apply the font-weight rule to Franklin if Franklin is available—not what you want at all. If you use font-stretch: condensed and Firefox has access to Franklin, it will dutifully condense it. (I didn't see that in any other browser.) In your particular situation, I would count on Firefox getting Franklin and accept that regular Arial will be used as the fallback. But adding "Franklin Gothic" (for FF) and "Arial Narrow" (for IE9) is going to help a lot.

(At the time of writing, Chrome is at version 21 and Firefox is at version 14.)

---

Related Topics