Allow Discrete Weight With Axes In Next/Font/Google Variable Fonts
next/font/google currently throws a build error when axes are combined with a discrete weight (e.g., weight: ['700']) on a variable font, even though Google Fonts supports this request shape. The fix removes the overly strict validation.
The validation logic in packages/font/src/google/validate-google-font-function-call.ts enforces that when axes are present, weight must be 'variable' or undefined. This assumption is invalid because Google Fonts supports requesting a discrete weight instance of a variable font while retaining axes (e.g., Newsreader:opsz,wght@6..72,700).
1. Clone the reproduction repository (https://github.com/zeinds/next-font-axes-discrete-weight-repro).
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.`
Fixing Code Block
diff --git a/packages/font/src/google/validate-google-font-function-call.ts b/packages/font/src/google/validate-google-font-function-call.ts
index abcdef1..1234567 100644
--- a/packages/font/src/google/validate-google-font-function-call.ts
+++ b/packages/font/src/google/validate-google-font-function-call.ts
@@ -120,7 +120,10 @@ export function validateGoogleFontFunctionCall(
if (axes) {
- if (weight !== 'variable') {
- throw new Error(
- 'Axes can only be defined for variable fonts when the weight property is nonexistent or set to variable.'
- )
- }
+ // Axes may be combined with discrete weights for variable fonts.
+ // The Google Fonts API supports requests such as
+ // Newsreader:opsz,wght@6..72,700, so we no longer require
+ // weight to be 'variable' or undefined.
}
Remove the check that disallows axes with discrete weight. The existing validation already verifies that weight values are valid for the font and that axes are valid for the font, so no additional restriction is needed. This aligns with the Google Fonts API behavior.
Edge Case Audit
Removing the check may allow axes to be combined with discrete weights on fonts that are not variable if the earlier axes validation does not catch it. Ensure that the axes validation still verifies the font has variable axes before accepting the request. Rollback: revert this change and use the workaround (weight: 'variable' or omit axes) if unexpected behavior occurs. Test with multiple discrete weights and different variable fonts to confirm correct CSS generation.
