Issue in Chrome with font weights (maybe a Chrome bug)

[darrylhein]

I've noticed that in Chrome 81+ (tried 80 (80.0.3987.116), 81 (81.0.4044.34), and 82 (82.0.4056.3)) on MacOS, the font weights are all showing as normal even though they have different weights in CSS. Here's a screenshot from the Tailwind website (Chrome 81 MacOS):

If I remove system-ui,-apple-system,BlinkMacSystemFont from the font stack then they have different weights. I've tried on my computer and Browserstack so I'm fairly confident it's not font issue on my computer. It does seem fine on Windows in Chrome and all other browsers on MacOS.

My guess is this is a bug in Chrome or some Chrome/MacOS issue, but I thought I'd post here just in case someone else runs into it and maybe I can save them some time. Or...maybe someone has some insight.

This maybe the same/similar issue as #1394 but I could be wrong.

[adamwathan]

Super weird! Definitely seems like a Chrome bug, going to escalate to my contacts there.

[darrylhein]

Interesting: just tried Chrome 82 and the weights are showing up again there. Maybe just a bad few builds. But still broken in 81.

[argyleink]

Sup y'all, bummer discovery! Thanks for reporting it. 👍

I've done some investigation and ultimately put most the thoughts into this Chromium bug https://bugs.chromium.org/p/chromium/issues/detail?id=1057654.

@darrylhein, Chrome 82 latest didnt resolve the issue for me, so I'm wondering what I need to do differently in order to see what you see? Having it fixed in 82 would be great, as it would allow me to find the offending commit by working backwards. You're just using Canary to test 82 yeah?

[darrylhein]

@argyleink I was trying in Browserstack. It's running 82.0.4056.3. But I just tried on my local machine running 82.0.4075.0 and no font weights.

[argyleink]

Catalina font update caused it. "Looks like the issue only occurs for SF NS Display, i.e. font sizes > 16, when the display variant is used." A solution is known, engineering on top of it 👍

[adamwathan]

Closing since Chrome bug and being fixed. Thanks @argyleink!

[bramus]

A solution is known, engineering on top of it 👍

@argyleink: What is the solution (other than simply not using BlinkMacSystemFont)? Now that Chrome 81 has been released about a week ago many websites are affected by this. Bug is still present in Canary (Chrome 84).

[argyleink]

The bug is of very high priority internally and is marked as a Chrome 83 blocker, aka required for 83 releasing. While it may still reproduce in Canary, I'm confident 83 will include resolution.

Here's a temporary solution until then, so you get some weights back in the meantime.

I've got projects affected by this too, and yeah, the Chromium team is on it.

[damirkotoric]

Thank you for the temporary workaround but I hope the Chrome team fix this properly ASAP.

Before the Chrome bug:
✨

With workaround:
🤢

[darrylhein]

I believe this may be resolved. In Chrome 83.0.4103.23, I'm now seeing the font weights on Tailwind's docs. I believe it was the latest update the fixed the issue, but I'm not sure if I missed an update or not.

[adamwathan]

Unfortunately not resolved, we just switched to a different font for now so the docs weren't confusing.

[bramus]

@darrylhein To work around this issue you can remove the use of BlinkMacSystemFont and replace it with the Inter font family, which is a drop-in replacement for SF Pro.

I've detailed and implemented this my blog. Here's a diff of my CSS:

+ @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

…

- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", 'Inter', "Helvetica Neue", sans-serif;
+ font-family: -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", 'Inter', "Helvetica Neue", sans-serif;

Note that I've placed Inter somewhere at the back of my font-stack, to still have the other platforms use their proper system font.

[jeremiahlateef]

I still have this same issue in my Chrome browser, Version 104.0.5112.102. The font-weight and the font-size do not reflect on browser but I can see them both in the dev tools. Any idea what the issue may be? I'm on a Windows btw.

[rankmartin]

Problem in Chrome browser still exists.

A possible solution is to change the name of the font and leave the src value at "local" empty. Works for me!

In the input.css:
/* nunito-700 - latin */ @font-face { font-family: 'CustomNunito'; font-style: normal; font-weight: 700; src: local(''), url('./../fonts/nunito-v25-latin/nunito-v25-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./../fonts/nunito-v25-latin/nunito-v25-latin-700.woff2') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

In the tailwind.config.js:
fontFamily: { 'nunito': ['CustomNunito', 'Helvetica', 'Arial', 'sans-serif'] }