Chrome not respecting font weight?
css, fonts, google-chrome, html
Solution
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.
Problem
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?