Next.js Discord

Discord Forum

next/font/google variable fonts

Unanswered
Netherland Dwarf posted this in #help-forum
Open in Discord
Netherland DwarfOP
I'm trying to use Instrument Sans semi-condensed using the next/font library and the axes prop but I'm getting an error message saying I can't use axes unless the font is a variable font.
I've checked Google fonts and the next/font type definition and Instrument Sans is a variable font and supports "wdth" axes.
Does anyone know if this is a bug on the next/font side or if not how it's possible to get the semi-condensed variant of Instrument Sans properly in Next.js

My code:
export const instrumentSans = Instrument_Sans({
  subsets: ['latin'],
  weight: ['400', '600', '700'],
  style: ['normal', 'italic'],
  // axes: ['wdth'],
  variable: '--font-instrument-sans',
  display: 'swap',
});

// in css
font-stretch: semi-condensed;


The error:
next/font` error:
Axes can only be defined for variable fonts

1 Reply

Netherland DwarfOP
I've found the solution!

I was able to find the file that threw that error in the next repo:

packages/font/src/google/validate-google-font-function-call.ts
  if (weights[0] !== 'variable' && axes) {
    nextFontError('Axes can only be defined for variable fonts')
  }


this showed me that I had to change the weight prop if I wanted axes to work:

-  weight: ['400', '600', '700'],
+  weight: 'variable', // this is optional
-  // axes: ['wdth'],
+  axes: ['wdth'],


I think this needs to maybe be explained better in the docs or maybe just the error message could be specific