How to make Open Sans Light to work in Chrome?
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?
Answer
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).