CODEWITHSUNDEEP
htmlcssgoogle-chromefonts
Sean
Sean

Reputation: 6499

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 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?

Upvotes: 20

Views: 41294

Answers (5)

youDontKnow
youDontKnow

Reputation: 1

I found the solution.

Thanks to LinkedIn.

-webkit-font-smoothing: antialiased;

Upvotes: 0

eugene
eugene

Reputation: 1

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.

Upvotes: 0

madhushankarox
madhushankarox

Reputation: 1477

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.

Upvotes: 3

Mariyan
Mariyan

Reputation: 664

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/

Upvotes: 2

jeradg
jeradg

Reputation: 511

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.

Upvotes: 21

Related Questions