Menu
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:
Thus, problem persist:
How to make this work on Chrome (for any user)? And why other browsers handle it ignoring the local font?
434
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).
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
