Chrome Not Respecting Font Weight?

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 Firefo

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

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

Solution 3:

The problem is "Arial Black". For some reason Chrome and IE (by the way) disregard font-weight with that font. Removed it and your CSS is applied as expected.

p { font-family: Arial, sans-serif; font-size: 40px; margin: 0; }

P.S. Now that I double check 700 and 900 are not differentiated. 600/900 are though. jeradg is right.

http://jsfiddle.net/ZjHEn/1/

Solution 4:

If an element has a native font weight other than normal (such as b, strong, th) adding the font weight property set to normal will fix the fuzzy font. This is a temporary fix to what I am convinced that this is a Chrome bug.

Solution 5:

I found the solution.

Thanks to LinkedIn.

-webkit-font-smoothing: antialiased;