vercel / vercel/next.js

next/font/google: allow axes with discrete weight for variable fonts

Open
#95,809 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Font (next/font)
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/zeinds/next-font-axes-discrete-weight-repro

To Reproduce
Link to the code that reproduces this issue

https://github.com/zeinds/next-font-axes-discrete-weight-repro

To Reproduce
  1. Clone the reproduction repository.

  2. Install dependencies.

  3. Run pnpm build (or npm run build).

  4. Observe the build error:

    Axes can only be defined for variable fonts when the weight property is nonexistent or set to variable.

Current vs. Expected behavior

Current behavior:

next/font/google throws when axes is combined with a discrete weight on a variable font.

Example:

import { Newsreader } from 'next/font/google';

export const newsreader = Newsreader({
  subsets: ['latin'],
  weight: ['700'],
  style: ['normal'],
  axes: ['opsz'],
  display: 'swap',
});
Current vs. Expected behavior

This combination should be allowed.

Google Fonts itself supports this request shape. For example, this URL works:

https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,700&display=swap

So it should be possible for next/font/google to request a discrete weight instance of a variable font while still preserving the requested axis.

Why this matters

Today there are only two workarounds:

  1. Use weight: 'variable' with axes, which keeps the axis but serves the full variable range.
  2. Use a discrete weight without axes, which reduces payload but drops the optical sizing axis.

There is currently no way through next/font/google to get both:

  • a discrete weight
  • and a retained axis such as opsz
Provide environment information
Operating System:
  Platform: darwin
  Arch: arm64
Binaries:
  Node: 24.16.0
  npm: 10.8.2
  pnpm: 10.33.0
Relevant Packages:
  next: 16.1.6
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Which area(s) are affected? (Select all that apply)

Font (next/font)

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

Previous auto-closed issue because the reproduction link was not recognized by the triage bot:

https://github.com/vercel/next.js/issues/95683

This new issue uses a public GitHub reproduction repository instead.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked next-font-axes-discrete-weight-repro repository and run its dependency installation followed by pnpm build or npm run build. Trace the next/font/google entry point that rejects axes with a discrete weight, then verify that the Newsreader example builds while retaining the requested opsz axis and weight 700.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.