Google webfont not displaying correct font weight

2
votes

I use google webfonts frequently with my website projects but I'm having a peculiar issue that I'm not sure how to cure.

On all of my browsers (FF,Chrome and Safari on OS X 10.8.2) the Open Sans regular font weight (400) is displaying as semi-bold. Here is an example of it even happening on google's webfont library: http://i.imgur.com/sZtWW.png

To make sure it's an issue on my end, I loaded up the page in browserstack. In the browserstack instance it displayed the correct font weight (Chrome 23 on Win 7).

Does anyone have any idea what the problem is?

1
webfontsgoogle-webfonts

1 Answers

1
votes

Your locally installed version of the Open Sans font is overriding that specified in the page's CSS.

Google's default rules to copy and paste from its site will give precedence to the local font.

To ensure the CSS-specified font takes precedence, use this CSS directive:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}