Chrome not respecting font weight?

Question

I've got Arial as my base font and I'm trying to use a variety of font-weights for different sections of the page (normal, bold/700, and 900)

This seems to work fine in both Firefox and Internet Explorer, but in Google chrome there seems to be absolutely no difference between bold/700 and 900!?

See fiddle

(incase the above link is broken/invalid)

HTML:

<p id="one">Testing</p>
<p id="two">Testing</p>
<p id="three">Testing</p>

CSS:

p { font-family: arial; font-size: 40px; margin: 0; }

#one { font-weight: normal; }
#two { font-weight: 700; }
#three { font-weight: 900; }

I've googled a bit and found a similar question which provides a semi-usefull answer:

Solved with:

font-weight: 900; font-family: "Arial Black", Arial, sans-serif;

But using the above simple makes everything assume a font-weight of 900 in Chrome (even when specified otherwise)

For an example of this see here (in Chrome obviously)

Is this a bug in Chrome? Or am I doing something wrong here?

Answer 1

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.

Answer 2

I think it is not a bug of Google chrome. It may be the font does not have the weight, 900. Not only in Chrome but also it is not working in Opera and Safari too.

Arial Black's normal, 700 and 900 everything is same in Safari.