Geek Answers Handbook

How to make Open Sans Light work in Chrome?

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

As for Windows, this works in current versions of FF and Edge, but not in Google Chrome. Such a browser displays both paragraphs with the same normal style instead of using a light paragraph 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 follows from this question , the problem is related to a conflict with locally installed fonts. In fact, pay attention to calling the " 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 a solution because:

  1. if it was there, then probably because some program needs it
  2. asking site users to remove their local fonts is not an option.

So the problem persists:

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

+6
source share
1 answer

The simple work that solved this problem for me was to copy the CSS source from the Google embed code, put it in your own CSS, and then just delete 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 a font installed locally and this method works in Chrome (and Firefox, IE, and Edge).

+7
source

More articles:


All Articles