How to make Open Sans Light to work in Chrome?

Question

This is a simple example of how to use Open Sans from Google API. The expected behaviour is to display the first line lighter (font-weight 300) than the second.

As far as Windows is concerned, this works on current releases of FF and Edge, but not on Google Chrome. Such a browser displays both paragraph with the same normal style instead of using the light one for the first paragraph.

<head>
    <meta charset="utf-8" />
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
    <style>

    </style>
</head>


<body>
    <p style="font-family: 'Open Sans'; font-weight: 300;">Foobar</p>
    <br>
    <p style="font-family: 'Open Sans'; font-weight: 400;">Foobar</p>
</body>

UPDATE:

As this question suggests, the problem is due to a conflict with fonts installed locally. In fact, observe the call to 'local' fonts from the Google API:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Simply removing the local font is not really a solution because:

if it was there it's probably because some program needs it
asking users of a website to remove their local fonts is not an option.

Thus, problem persist:

How to make this work on Chrome (for any user)? And why other browsers handle it ignoring the local font?

it's working for me: https://jsfiddle.net/70axnLve/ - Google Chrome: 48.0.2564.109 m — Sebastian Brosch, Feb 11 '16 at 13:29
@sebastianbrosch your fiddle is not loading the font, here is a [fiddle](https://jsfiddle.net/y5zp6z9j/) loading the font — dippas, Feb 11 '16 at 13:45
@dippas - I see the error now on inspect, but same again your fiddle is working too! — Sebastian Brosch, Feb 11 '16 at 13:50
@dippas thanks for the fiddle, it's exactly the described problem and behaviour: it works on FF and it does not on Chrome, at least as I see it. — Niccolò, Feb 11 '16 at 13:51
@Niccolò works for me in my fiddle, do you have this font install locally ? — dippas, Feb 11 '16 at 13:52
I don't recall to have installed the font locally.. What can I say, it might be that it is installed. But then how to prevent this behaviour? And why does it work on Firefox? I can't really tell users to check and disinstall the font if they have a local copy, right? — Niccolò, Feb 11 '16 at 13:57
I deleted the local Open Sans font and now it works for me too. Now: 1) removing it might not be so smart as if it was there it's probably because some program needs it 2) asking users of a website to remove their local fonts is not an option. Thus, problem persist: *how to make this work?* (on Chrome, as other browsers seem to handle it anyway) — Niccolò, Feb 11 '16 at 14:19

score 11 · Answer 1 · answered Dec 29 '16 at 16:07

A simple work-around that solved this problem for me was to copy the CSS source from the Google embed-code, place it in your own CSS, and then simply remove the local(...) sources.

Like this:

@font-face {
   font-family: 'Open Sans Light';
   font-style: normal;
   font-weight: 300;
   src:url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}

I have the font installed locally, and this method seems to work in Chrome (and Firefox, IE, and Edge).

How to make Open Sans Light to work in Chrome?

1 Answers1