OpenSans Semibold Normal displayed as Italic

Question

I have problem with Open Sans font imported from Google Web Fonts. OpenSans Semibold (600) normal is suddenly on all my webpages rendered in italic. I tried force font-style to normal etc. but with same results. After changing font weight to 500 or 800 it's back to normal style.

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}

JSFiddle

Even Google Fonts shows it in italic.

Answer 1

Had the same issue, it was a conflict with the Open Sans I had installed locally. Try to disable your locally installed fonts first.

Answer 2

I'm not sure of the issue since your fiddle seems working fine, however you could simplify your SCSS code like this.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

p {
    font-family: 'Open Sans';

    &.weight300 { font-weight: 300 }
    &.weight400 { font-weight: 400 }
    &.weight600 { font-weight: 600 }
}

Answer 3

It looks like the fiddle is working fine, so its possible that you have another style effecting it. I would check for that with a DOM inspector. You might also check for unclosed tags, sometimes those can bring over styles from other code as well. If that doesn't work you could try to force it with !important or jQuery as a last resort

<script>

      $( ".element-in-question" ).css( "font-style", "normal" );

</script>

Its strange because I wouldn't think that the italic would work without it imported and I don't see it in your code.