html - 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.