Font weight ignored in Chrome

Question

I created a fiddle trying to use Open Sans font with font-weight 300:

HTML

example

CSS

Answer 1

My solution is download and install all the weight types of the font on your machine, or don't install it at all. That's odd solution, but works for me.

Answer 2

Try changing the font family to 'Open Sans Light', sans-serif;. I had the same problem and this worked for me.

Answer 3

i overlaid them on top of each other and they look good on osx chrome.

font-weight: 400 !important;

beneath

font-weight: 300 !important;

http://jsfiddle.net/gpmXe/22/

Answer 4

Add this to your CSS:

* {-webkit-font-smoothing: antialiased;}

Answer 5

For me the solution was to include the CSS in the head-section instead of using @import inside the stylesheet.

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,700;1,400&display=swap" rel="stylesheet">

Answer 6

This seems to be a Chrome/Chromium bug, caused by having the font installed locally on your system. Other browsers don't seem to suffer from this issue.

So far, it seems to occur on Linux and Windows (confirmed).

For some reason, it will just load your local font and ignore any of your font-weight rules, even if they're !important. It won't even be consistent with itself: the font weight can change randomly between tabs and page reloads.

The simplest workaround is to remove the font, but that could be an issue if you need it for something else.

You might also try renaming the font to something else in order to force Chrome to use your web font and honour your CSS font rules.