1

I'm having an issue with font-weight in Chrome. Any font weights lower than the default weight of 400 will render at the default weight, overriding the font-weight:300 CSS attribute. Font weights higher than the default weight will render as expected in Chrome, and all font weights render properly in Firefox. Why is this happening?

For example:

<div class="light">Light</div>

with CSS

.light {font-weight:300;}

will render as if font-weight:400.

jsfiddle, compare view in Firefox and Chrome

EDIT: Screenshots of the text in both Chrome and Firefox, running in Fedora 20:

Chrome (incorrect rendering): i.imgur.com/MCHHTlF.png

Firefox (correct rendering): i.imgur.com/tTH9rPd.png

Sorry, I can only post 2 links maximum, apparently.

adroitwhiz
  • 113
  • 6
  • @jandresrodriguez Yes, I'm using Google Web Fonts. Is that the source of the problem? – adroitwhiz Jun 08 '14 at 23:42
  • Look when you customize the font, that you checked the weight options you're looking for – jandresrodriguez Jun 08 '14 at 23:45
  • @jandresrodriguez I did. Weights 300, 400, and 700 are all loaded, but only 400 and 700 are used... – adroitwhiz Jun 08 '14 at 23:48
  • Looks fine to me, from the example you posted – Blake Mann Jun 09 '14 at 02:54
  • @BlakeMann Hmm, maybe it's OS-specific. I've edited some screenshots and the OS I'm using (Fedora 20) into my original post. – adroitwhiz Jun 09 '14 at 04:47
  • You should include all the relevant code (the code needed to reproduce the problem) in the question itself. This includes your CSS code that sets the font family as well as the code that takes the Google font into use (a `link` element). – Jukka K. Korpela Jun 09 '14 at 11:35
  • The jsfiddle fails to work even on Firefox, but that’s just because jsfiddle interprets the external resource as JavaScript and not as CSS (append e.g. `&foo=foo.css` to its URL to fix this). But to debug the actual problem, check Chrome console log and network log to see whether the font files are loaded at all. – Jukka K. Korpela Jun 09 '14 at 11:38

1 Answers1

1

Try changing the font family to 'Open Sans Light', sans-serif;. I had the same problem and this worked for me. It also worked in your provided fiddle.

Jamie Kudla
  • 872
  • 3
  • 17
  • 37