Skip to content

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

@BenoitHiller

Description

@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:

Image

100% scaling:

Image

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Font (next/font)Related to Next.js Font Optimization.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions