Skip to content

NEXT 15 Font optimization causing a different effect on text #79349

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

Open
ALWISHARIFF opened this issue May 18, 2025 · 0 comments
Open

NEXT 15 Font optimization causing a different effect on text #79349

ALWISHARIFF opened this issue May 18, 2025 · 0 comments
Labels
Font (next/font) Related to Next.js Font Optimization.

Comments

@ALWISHARIFF
Copy link

ALWISHARIFF commented May 18, 2025

Link to the code that reproduces this issue

https://github.com/ALWISHARIFF/next-15-font

To Reproduce

Reproduction
Two minimal repositories demonstrate the issue:

Next.js 14 (working as expected):
https://github.com/ALWISHARIFF/next-14-font

Next.js 15 (incorrect font weights):
https://github.com/ALWISHARIFF/next-15-font

Steps to reproduce:

Clone each repository:

bash
Copy
Edit
git clone https://github.com/ALWISHARIFF/next-14-font
git clone https://github.com/ALWISHARIFF/next-15-font
Install dependencies and run dev server in each:

bash
Copy
Edit
cd next-14-font
npm install && npm run dev

visit next-14-font.vercel.app

cd ../next-15-font
npm install && npm run dev

visit next-15-font.vercel.app

Observe the rendered text examples on the homepage. Compare how each font weight appears.

Current vs. Expected behavior

I’m seeing a discrepancy in how custom fonts and font weights are rendered between Next.js 14 and Next.js 15. In my Next.js 14 project, everything displays as expected, but after upgrading to Next.js 15, certain font weights (e.g. 400, 500, 600) no longer render correctly—text looks lighter or the wrong weight entirely.

Both projects import the same Google Font (using the Next.js font optimization APIs) with identical weight configurations. I expect the font weights (e.g. 400, 500, 600) to render identically in both Next.js 14 and Next.js 15.

Actual Behavior
Next.js 14: All font weights render with correct thickness.

Next.js 15: Lighter weights display correctly, but medium/heavy (e.g. 500, 600, 700) render too thick or default to the base weight.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Tue, 01 Apr 2025 18:45:30 +0000
  Available memory (MB): 15637
  Available CPU cores: 8
Binaries:
  Node: 22.14.0
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: 10.6.2
Relevant Packages:
  next: 15.3.2 // Latest available version is detected (15.3.2).
  eslint-config-next: 15.3.2
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.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)

Additional context

I’ve confirmed that the next/font/google import settings are identical.

No custom CSS affects the font rendering in either repo.

Browser caching cleared; hard reloads show the same issue.

I also used latest canary but fails

@github-actions github-actions bot added the Font (next/font) Related to Next.js Font Optimization. label May 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Font (next/font) Related to Next.js Font Optimization.
Projects
None yet
Development

No branches or pull requests

1 participant