Search code examples
cssfontsinternet-explorer-11google-webfonts

Open Sans font thicker when using installed font vs webfont in IE11

I have a problem in IE11 where the font Open Sans is displaying a lot thicker when shown on a computer with the font installed locally, vs a computer where the font is pulled from the website as a webfont.

This happens on an internal website that uses the Google font, Open Sans. The font file and CSS has been downloaded and is included directly in the app as it needs offline capabilities (so it isn't pulling from Google's servers).

I discovered the issue by uninstalling Open Sans from my computer and noticed it displays normally, but if it is installed on my computer, it is much thicker. To be clear it is not just showing the bold font instead, as I can still change the font-weight and it still gets even more bold. Also this only happens in IE11, works fine in Chrome no matter the situation. Looking at the rendered fonts in Chrome show the correct weights being used. I don't know how to check this in IE though.

This is the CSS being used to include the font in the website:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(fonts/OpenSans-Regular.woff2?v=1.5.0) format('woff2'), url(#{$assets-path}fonts/OpenSans-Regular.woff?v=1.5.0) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(fonts/OpenSans-SemiBold.woff2?v=1.5.0) format('woff2'), url(#{$assets-path}fonts/OpenSans-SemiBold.woff?v=1.5.0) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(fonts/OpenSans-Bold.woff2?v=1.5.0) format('woff2'), url(#{$assets-path}fonts/OpenSans-Bold.woff?v=1.5.0) format('woff');
}

Here is a screenshot of the font in IE when installed on the computer:

enter image description here

Here is a shot of the font when it is not installed:

enter image description here

Solution

  • I ended up removing the references to a local copy of the font, forcing the site to use the downloaded copy instead by removing the followig code from each font:

    local('Open Sans SemiBold'), local('OpenSans-SemiBold')