next/font/google: allow axes with discrete weight for variable fonts
Nobody has claimed this yet.
- 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
-
Clone the reproduction repository.
-
Install dependencies.
-
Run
pnpm build(ornpm run build). -
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:
- Use
weight: 'variable'withaxes, which keeps the axis but serves the full variable range. - Use a discrete
weightwithoutaxes, 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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