search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.42k stars 26.78k forks source link

@next/font font-weight not working correctly in Chrome #44375

Open denvradiy opened 1 year ago

denvradiy commented 1 year ago

Verify canary release

Provide environment information

Operating System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000 Binaries: Node: 14.19.0 npm: 6.14.16 Yarn: 1.22.17 pnpm: 7.13.2 Relevant packages: next: 13.1.1 eslint-config-next: 13.1.1 react: 18.2.0 react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Font optimization (@next/font)

Link to the code that reproduces this issue

https://github.com/denvradiy/next-fonts-loading-issue

To Reproduce

Hard refresh (shift + command+ R) the page multiple times in Chrome in host and font-weight will crash.

Describe the Bug

If you refresh the page with reseting the cache (shift + command+ R) multiple times in Chrome then font-weight crashes and displays incorrectly.

This bug appears only on host (in this case it's vercel). But if I run next build and next start locally on my computer then it works correctly.

For testing purposes I took generated create-next-app example and didn't change anything

https://github.com/denvradiy/next-fonts-loading-issue - repo to reproduce https://next-fonts-loading-issue.vercel.app/ - vercel https://monosnap.com/file/2uyrSIIo3k4pMpKW0H9RV1JUB4WY9m - screen recording

Expected Behavior

Font weight should work correctly in all modern browsers

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Vercel

Evilshoot commented 1 year ago

I have exactly the same issue, would be great to fix it asap

Blackglade commented 1 year ago

Experiencing this as well!

Archiyopp commented 1 year ago

I have the same problem while using Open Sans Variable font, it only changes between normal and bold weights.

nattui commented 1 year ago

Also facing this issue

Inter with font weight of 400, 500, and 700 works for me but not 600

maccman commented 1 year ago

Am experiencing this issue too.

friconelli commented 1 year ago

I also have the same problem on Chrome, while on Firefox and Safari it works fine

tiagobbraga commented 1 year ago

The same problem.

tbergeron commented 1 year ago

I think I'm having the same I've been wondering why I can't use anything beyond 700 🤔 I'm trying to figure out a workaround, anyone?

nattui commented 1 year ago

I think I'm having the same I've been wondering why I can't use anything beyond 700 🤔 I'm trying to figure out a workaround, anyone?

@tbergeron Maybe try not having a font weight. That fixed it for me

tbergeron commented 1 year ago

I ended up working around the bug by using a