1

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. enter image description here

hovado
  • 4,474
  • 1
  • 24
  • 30

3 Answers3

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.

Henrique Ibaldo
  • 148
  • 1
  • 7
0

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 }
}
Vincent Panugaling
  • 896
  • 1
  • 12
  • 28
  • Look at image - I see it even in Google Fonts. But if you see it OK in fiddle, it has to be some problem at my computer, although fonts on localhost work fine... – hovado Jan 16 '16 at 15:56
  • 1
    Ha, I tried to delete all Open Sans fonts from my computer and install it again. Now it works fine, even for online webs. But just don't get it. I had this fonts months before this problem occurs. – hovado Jan 16 '16 at 16:03
  • Yeah, I assume also that it was on your computer Open Sans font. Anyway it's good that you solve it. – Vincent Panugaling Jan 18 '16 at 00:35
0

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.

Aidan Boyle
  • 66
  • 5
  • It's strange, because on localhost I see it in normal style. But as soon as I upload it online (same css), it's italic. – hovado Jan 16 '16 at 15:59
  • Did you check the DOM to see where the style was coming from? also, and just a longshot, you could try importing your font kit with javascript. I usually do nowadays – Aidan Boyle Jan 20 '16 at 00:22