CODEWITHSUNDEEP
google-chromefontschromiumwebfontsgoogle-webfonts
dee
dee

Reputation: 152

Google web font "Open Sans" does not show up in the correct weight if also installed locally on Windows 7+10

I am using "Open Sans" like so:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
google: {
  families: ['Open+Sans:400,400italic,600,600italic,700,700italic:latin']
}
});
</script>

and all works as it should, except on 2 of my PCs (one with "Windows 7" and the other one with "Windows 10") with the most recent "Chrome Browser", there is no difference between the widths of 600 and 700. With the most recent "Edge" and "Firefox" browsers all is good.

I found out, that on both machines "Open Sans" was installed locally. On the "Windows 7" PC by myself and on the "Windows 10" PC it was already pre installed. After uninstalling the local font on both PCs all was working fine.

Is this some kind of a chrome bug? Could not find anything online about it.

Also, if other users have on their "Windows 10" PCs "Open Sans" locally pre installed, then the website I am developing would show on a Chrome Browser also the wrong weights for the "Open Sans" font. Can this be somehow avoided?

PS1. not using any "src: local(..." declarations in my css

PS2. not importing fonts via @font-face instead using webfont.js to handle all

here is a fiddle:
https://jsfiddle.net/x75h2624
as you can see on win10 / chrome Open Sans 600 + 700 (both only on normal not italic) is exactly the same. on win10 firefox, win10 edge, iOS chrome etc... all works OK!

PS3. just found this
https://bugs.chromium.org/p/chromium/issues/detail?id=335050
and posted there as well could it be related and not fixed since 2014?

PS4. as this issue was quite old I filed a new bug report:
https://bugs.chromium.org/p/chromium/issues/detail?id=617419
and also found this blog describing the same problem: http://timschreiber.com/2015/01/20/local-web-font-conflict-in-chrome/

Upvotes: 3

Views: 5662

Answers (2)

dee
dee

Reputation: 152

I was thinking, that in order to avoid this Chrome bug one has to be able to specify the "Open Sans" font family with a custom name, in order for Chrome not to get confused, so by reading carefully through the WebFontLoader specs under the heading "Custom" (https://github.com/typekit/webfontloader#custom) I was lucky, this is actually possible!

What I did was first downloading the needed Fonts + CSS from http://www.localfont.com/

After uploading the fonts to my server I added the downloaded CSS declarations into my own css file. Beware: remove all the local('...') declarations and rename all instances of font-family: 'Open Sans'; to something custom, I chose font-family: 'CustomOpenSans';.

After this the css in my case looked like this:

@font-face {
  font-family: 'CustomOpenSans';
  font-weight: 400;
  font-style: normal;
  src: url('../assets/fonts/Open-Sans-regular/Open-Sans-regular.eot');
  src: url('../assets/fonts/Open-Sans-regular/Open-Sans-regular.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/Open-Sans-regular/Open-Sans-regular.woff2') format('woff2'),
       url('../assets/fonts/Open-Sans-regular/Open-Sans-regular.woff') format('woff'),
       url('../assets/fonts/Open-Sans-regular/Open-Sans-regular.ttf') format('truetype'),
       url('../assets/fonts/Open-Sans-regular/Open-Sans-regular.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'CustomOpenSans';
  font-weight: 600;
  font-style: normal;
  src: url('../assets/fonts/Open-Sans-600/Open-Sans-600.eot');
  src: url('../assets/fonts/Open-Sans-600/Open-Sans-600.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/Open-Sans-600/Open-Sans-600.woff2') format('woff2'),
       url('../assets/fonts/Open-Sans-600/Open-Sans-600.woff') format('woff'),
       url('../assets/fonts/Open-Sans-600/Open-Sans-600.ttf') format('truetype'),
       url('../assets/fonts/Open-Sans-600/Open-Sans-600.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'CustomOpenSans';
  font-weight: 700;
  font-style: normal;
  src: url('../assets/fonts/Open-Sans-700/Open-Sans-700.eot');
  src: url('../assets/fonts/Open-Sans-700/Open-Sans-700.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/Open-Sans-700/Open-Sans-700.woff2') format('woff2'),
       url('../assets/fonts/Open-Sans-700/Open-Sans-700.woff') format('woff'),
       url('../assets/fonts/Open-Sans-700/Open-Sans-700.ttf') format('truetype'),
       url('../assets/fonts/Open-Sans-700/Open-Sans-700.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'CustomOpenSans';
  font-weight: 400;
  font-style: italic;
  src: url('../assets/fonts/Open-Sans-italic/Open-Sans-italic.eot');
  src: url('../assets/fonts/Open-Sans-italic/Open-Sans-italic.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/Open-Sans-italic/Open-Sans-italic.woff2') format('woff2'),
       url('../assets/fonts/Open-Sans-italic/Open-Sans-italic.woff') format('woff'),
       url('../assets/fonts/Open-Sans-italic/Open-Sans-italic.ttf') format('truetype'),
       url('../assets/fonts/Open-Sans-italic/Open-Sans-italic.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'CustomOpenSans';
  font-weight: 600;
  font-style: italic;
  src: url('../assets/fonts/Open-Sans-600italic/Open-Sans-600italic.eot');
  src: url('../assets/fonts/Open-Sans-600italic/Open-Sans-600italic.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/Open-Sans-600italic/Open-Sans-600italic.woff2') format('woff2'),
       url('../assets/fonts/Open-Sans-600italic/Open-Sans-600italic.woff') format('woff'),
       url('../assets/fonts/Open-Sans-600italic/Open-Sans-600italic.ttf') format('truetype'),
       url('../assets/fonts/Open-Sans-600italic/Open-Sans-600italic.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'CustomOpenSans';
  font-weight: 700;
  font-style: italic;
  src: url('../assets/fonts/Open-Sans-700italic/Open-Sans-700italic.eot');
  src: url('../assets/fonts/Open-Sans-700italic/Open-Sans-700italic.eot?#iefix') format('embedded-opentype'),
       url('../assets/fonts/Open-Sans-700italic/Open-Sans-700italic.woff2') format('woff2'),
       url('../assets/fonts/Open-Sans-700italic/Open-Sans-700italic.woff') format('woff'),
       url('../assets/fonts/Open-Sans-700italic/Open-Sans-700italic.ttf') format('truetype'),
       url('../assets/fonts/Open-Sans-700italic/Open-Sans-700italic.svg#OpenSans') format('svg');
}

and the webfont.js code like this:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
WebFontConfig = {
    custom: { families: [ 'CustomOpenSans' ] }
}; 
</script>

The line custom with the custom family naming did the trick.

Also I needed to change the font-family value in my CSS to 'CustomOpenSans' like so:

body
{
    font-family: 'CustomOpenSans', sans-serif;
}

I am hoping the guys at Chromium will fix this issue soon...

Upvotes: 2

T04435
T04435

Reputation: 13992

I think you should use the font as per Google font website instructions, I will also include the options for HTML, CSS as well as the webfont.js

HTML

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>

CSS

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

JS

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Open+Sans:400,600,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();  
</script>

Thanks T04435.

Upvotes: 0

Related Questions