Font weight ignored in Chrome

Question

I created a fiddle trying to use Open Sans font with font-weight 300:

HTML

<span class="demo">example</span> 

CSS

.demo {   font-weight: 400 !important;   font-family: 'Open Sans' !important;   font-style: normal;   font-variant: normal; } 

I use Google fonts to define the CSS

I can see a difference in Firefox (Ubuntu 13.10) when rendering at font-weight: 300 (light) and at font-weight: 400 (normal) but none in Chrome (Version 33.0.1750.117 ), where everything looks like it's rendered at font-weight:400. Am I doing something wrong or is there a bug in Chrome? Is there any known workaround?

Update:

There is definitely something wrong with chrome I have two instances of the same page open in 2 different windows in Chrome. One is rendering the font ok (300 weight corresponds to the light variant) and one is not (300 weight is the same as the Normal variant). Any clues? I've made sure to refresh the page in each tab so they are actually the same page.

Update 2: Attached screenshot: of the bug:

Update 3 This is not a duplicate of this. In that question the problem is that "Arial Black" and "Arial" are different fonts actually. In my case Open Sans is the only font and the problem is Chrome picking up the incorrect weight some times. As you can see from the screenshots, Chrome is not consistent with the font rendered even between two instances.

Answer 1

Add this to your CSS:

* {-webkit-font-smoothing: antialiased;}