Font weight ignored in Chrome

Question

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: Chrome font rendering 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.

If you whack the font-size up to 7.5em, you'll notice that there is a slight difference in the font-weight (I am using Chrome). If you add -`webkit-font-smoothing: antialiased;` you'll see the difference even more. — adaam, Feb 24 '14 at 23:10
Instead of having all of those css calls, why not just use the google font import, i.e. `@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700,700italic,800);` — ElliotSchmelliot, Feb 24 '14 at 23:16
@adaam I notice no difference both at 7.5em and using `-webkit-font-smoothing: antialiased`. — vseguip, Feb 25 '14 at 07:42
@ElliotSchmelliot I'm already using Google's font import as an external resource in the doodle. — vseguip, Feb 25 '14 at 07:43
Do you happen to have Open Sans installed locally on your system? I've had some issues with the font weight before and after I deleted it from the system, everything worked fine. — Léo Lam, Mar 19 '14 at 12:15
@0x2D9A3 Thanks for the feedback! I've posted it as answer since it worked for more than one person. I wonder if it only occurs on Linux... — Léo Lam, Dec 30 '14 at 11:13

score 38 · Answer 1 · answered Dec 17 '14 at 14:49

38

Add this to your CSS:

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

answered Dec 17 '14 at 14:49

Fred K

13,249
14
78
103

1

Thanks, it works. Is there any explanation for that? – Vojtech Ruzicka Aug 31 '16 at 13:18
1

Works for me too. Know more about font smoothing here: http://szafranek.net/works/articles/font-smoothing-explained/ – Jibran K Nov 23 '16 at 13:09

Léo Lam · Answer 2 · 2014-12-30T13:18:10.940

11

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.

edited Dec 30 '14 at 13:18

answered Dec 30 '14 at 11:12

Léo Lam

3,870
4
34
44

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ò Feb 11 '16 at 10:50
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 `` to Google's CSS but it's not that complicated either. – Léo Lam Feb 11 '16 at 18:07
Renaming the font reference won't work on Chrome 56.0.2924.87 – Dan Mar 01 '17 at 21:45
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! – Daniel Apr 07 '17 at 02:34
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 section. Also see my answer. – bas Apr 20 '20 at 07:34
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) – Adam Chalcraft Mar 17 '21 at 07:36

score 7 · Answer 3 · answered Nov 25 '21 at 14:40

7

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: …;
}

answered Nov 25 '21 at 14:40

Michael Schmid

4,601
1
22
22

1

wow, could not find this anywhere else. saved me, thank you! – switz Aug 20 '22 at 09:26
1

This was the only solution that worked for me – nth-child Jan 06 '23 at 21:55

score 3 · Answer 4 · answered Jul 02 '14 at 13:42

3

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

answered Jul 02 '14 at 13:42

Jamie Kudla

872
3
17
37

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ò Feb 11 '16 at 10:54

score 1 · Answer 5 · answered Feb 25 '14 at 00:28

1

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/

answered Feb 25 '14 at 00:28

jakealbaugh

256
1
7

2

The still look the same to me on Linux. – vseguip Feb 25 '14 at 08:09
On Win Chrome as well for me – Niccolò Feb 11 '16 at 10:56

score 0 · Answer 6 · answered Jan 12 '17 at 04:17

0

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.

answered Jan 12 '17 at 04:17

harisrozak

101
4

score 0 · Answer 7 · answered Apr 16 '20 at 12:14

0

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">

answered Apr 16 '20 at 12:14

bas

52
3

Priya Bansal · Answer 8 · 2022-09-10T07:31:54.090

0

In HTML use this instead of using it in CSS. Best Solution

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

Doc for ital & wght

edited Sep 10 '22 at 07:31

answered Sep 10 '22 at 06:56

Priya Bansal

9
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 15 '22 at 07:30
1

Wouldn't recommend this if your site needs to be GDPR compliant – Matthias Seifert Jan 09 '23 at 14:36
This is definitely not the best solution and, moreover, cannot be used within the EU or countries that protect users' data. – rank Jan 25 '23 at 12:19

Font weight ignored in Chrome

8 Answers8

Linked