-
Notifications
You must be signed in to change notification settings - Fork 30k
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/busy-shirley-dg57zm?workspaceId=ws_YGJRKdEKng1kurcxFGU5DV
To Reproduce
Use the Nanum_Gothic_Coding font from next/font/google with weight: 700.
I do not know if there are quirks to getting it to happen, I'm making a reasonable assumption that it is related to splitting up the ttf font into a bunch of woff2 files. The ttf being what is normally returned.
Current vs. Expected behavior
When using the font through the next/font/google library the rendering behaviour is clearly very bad. This is especially noticeable at 200% OS level display scaling in windows where the bottoms of the letters are visibly misaligned.
The following screenshots are taken from the linked replication environment where I just load the font as specified side by side with a local copy of the ttf file for the same font so that you can see the difference.
200% scaling:
100% scaling:
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: #1 SMP PREEMPT_DYNAMIC Sun Aug 6 20:05:33 UTC 2023
Available memory (MB): 4242
Available CPU cores: 2
Binaries:
Node: 20.9.0
npm: 9.8.1
Yarn: 1.22.19
pnpm: 8.10.2
Relevant Packages:
next: 15.3.1-canary.7 // Latest available version is detected (15.3.1-canary.7).
eslint-config-next: N/A
react: 19.0.0
react-dom: 19.0.0
typescript: 5.1.3
Next.js Config:
output: N/AWhich area(s) are affected? (Select all that apply)
Font (next/font)
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local)
Additional context
Note that I spotted the behaviour locally in 15.2.4, the version above is from the replication codesandbox.
I have not yet attempted to run the other stage(s), they are likely all impacted the same way.

