Font weight ignored in Chrome

html css google-chrome fonts webfonts

30,335

Solution 1

Add this to your CSS:

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

Solution 2

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.

Solution 3

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

Solution 4

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/

Solution 5

I was having this issue with a variable font. It was solved by defining a font-weight range in the font-face definition.

@font-face {
  font-family: …;
  font-weight: 1 999;
  src: …;
}

View more solutions

30,335

Author by

vseguip

Updated on November 26, 2021

Comments

vseguip over 2 years
I created a fiddle trying to use Open Sans font with font-weight 300:

HTML
```
<span class="demo">example</span>
```
CSS
```
.demo {
  font-weight: 400 !important;
  font-family: 'Open Sans' !important;
  font-style: normal;
  font-variant: normal;
}
```
I use Google fonts to define the CSS

I can see a difference in Firefox (Ubuntu 13.10) when rendering at font-weight: 300 (light) and at font-weight: 400 (normal) but none in Chrome (Version 33.0.1750.117 ), where everything looks like it's rendered at font-weight:400. Am I doing something wrong or is there a bug in Chrome? Is there any known workaround?

Update:

There is definitely something wrong with chrome I have two instances of the same page open in 2 different windows in Chrome. One is rendering the font ok (300 weight corresponds to the light variant) and one is not (300 weight is the same as the Normal variant). Any clues? I've made sure to refresh the page in each tab so they are actually the same page.

Update 2: Attached screenshot: of the bug:

Update 3 This is not a duplicate of this. In that question the problem is that "Arial Black" and "Arial" are different fonts actually. In my case Open Sans is the only font and the problem is Chrome picking up the incorrect weight some times. As you can see from the screenshots, Chrome is not consistent with the font rendered even between two instances.
vseguip about 10 years

The still look the same to me on Linux.
Niccolò about 8 years

the problem is "what if the user has the font installed"? And "try renaming the font to something else" for Google's Open Sans is not so trivial.
Niccolò about 8 years

This makes the Google font not working on any browser for me: 'Open Sans Light' is not recognized and all browsers fall back to the installed sans-serif I believe.
Niccolò about 8 years

On Win Chrome as well for me
Léo Lam about 8 years

You'd have to get Chromium to fix this issue. (I don't know if it's been fixed recently.) As for renaming the font, it's as trivial as downloading the font and changing the font name when you reference it in your CSS. It's not as easy as simply adding a <link> to Google's CSS but it's not that complicated either.
Vojtech Ruzicka over 7 years

Thanks, it works. Is there any explanation for that?
Jibran K over 7 years

Works for me too. Know more about font smoothing here: szafranek.net/works/articles/font-smoothing-explained
Dan about 7 years

Renaming the font reference won't work on Chrome 56.0.2924.87
dspacejs about 7 years

Ahh, yes. That's it. It renders perfectly on other browsers and devices, and the font-weight is set to 400 yet it's rendering as 700. Thanks!
bas about 4 years

I ran across this as well. The solution for it to work well in Chrome is to not use @import but instead include the file css in the <head> section. Also see my answer.
Adam Chalcraft about 3 years

Just to add that the bug is also there on Mac OS. Details: Chrome Version 89.0.4389.82 (Official Build) (x86_64) and macOS Catalina Version 10.15.6 (19G73)