Optimizations performed on next/font/google fonts are able to dramatically change the appearance of rendered text

[BenoitHiller]

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/A

Which 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.

[sa-abdullah]

Can I ork on this?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[ALWISHARIFF]

@BenoitHiller Hi Benoit, Did you find a solution to the issue since i am using next 15 the Roboto font is not working as expected in next 15 check out this issue https://github.com/vercel/next.js/issues/79349

[ALWISHARIFF]

@sa-abdullah السلام عليكم ورحمة الله وبركاته can we can work on this together ins Allah

[BenoitHiller]

So I gave this a second look and I've been able to identify the cause of this bug. next/font/google is fetching the fonts using a fixed user agent that identifies it as OSX. At some point google appears to have started removing TTF font hinting information from the files sent to users on OSX. This is likely because OSX has started ignoring that hinting information due to it being unnecessary on retina displays.

The user agent currently being used is:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

If I compare what https://fonts.googleapis.com/css2 returns for that user agent vs. the following windows one:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

I can see that it gives a different list of woff2 files. If I take the corresponding files from each and compare them in FontForge it reports that the OSX version is different only in that it is missing the hinting instructions.