-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Issue in Chrome with font weights (maybe a Chrome bug) #1402
Comments
Super weird! Definitely seems like a Chrome bug, going to escalate to my contacts there. |
Interesting: just tried Chrome 82 and the weights are showing up again there. Maybe just a bad few builds. But still broken in 81. |
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? |
@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. |
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 👍 |
Closing since Chrome bug and being fixed. Thanks @argyleink! |
@argyleink: What is the solution (other than simply not using |
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. |
Unfortunately not resolved, we just switched to a different font for now so the docs weren't confusing. |
@darrylhein To work around this issue you can remove the use of 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. |
Fixes #3 --- related to tailwindlabs/tailwindcss#1402
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. |
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: In the tailwind.config.js: |
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.
The text was updated successfully, but these errors were encountered: