next/font Roboto_Flex cannot have axis set

[mclement18]

Link to the code that reproduces this issue

https://github.com/mclement18/nextjs-font-bug-example

To Reproduce

1. run the dev server using npm run dev

Current vs. Expected behavior

I expect to be able to use the axes of the Roboto_Flex font since the type signature tells me that I can do it but I get the following error :

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

Provide environment information

Operating System:
  Platform: linux
  Arch: arm64
  Version: #44-Ubuntu SMP PREEMPT_DYNAMIC Fri Jun  7 19:27:11 UTC 2024
  Available memory (MB): 17949
  Available CPU cores: 12
Binaries:
  Node: 22.9.0
  npm: 10.8.3
  Yarn: 1.22.22
  pnpm: 9.12.1
Relevant Packages:
  next: 15.0.3-canary.7 // Latest available version is detected (15.0.3-canary.7).
  eslint-config-next: N/A
  react: 19.0.0-rc-7c8e5e7a-20241101
  react-dom: 19.0.0-rc-7c8e5e7a-20241101
  typescript: 5.3.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), next build (local), next start (local)

Additional context

It does not work on the 14.2.17 release that we are using on our project.

[samcx]

@mclement18 Thank you for submitting an issue!

Taking a look at this

[mclement18]

Thank you for your time but I found my mistake. I got confused in the doc at the weight section https://nextjs.org/docs/14/app/api-reference/components/font#weight.

I didn't realized that it was required to set the weight to 'variable' in order to use the axes.

I was trying to do:

const robot_flex = Roboto_Flex({
  variable: '--roboto-flex',
  style: 'normal',
  weight: ['400', '700'], // using an array
  display: 'swap',
  preload: true,
  subsets: ['latin', 'latin-ext', 'greek'],
  axes: ['wdth'],
});

When I had to do:

const robot_flex = Roboto_Flex({
  variable: '--roboto-flex',
  style: 'normal',
  weight: 'variable', // just set it to 'variable`
  display: 'swap',
  preload: true,
  subsets: ['latin', 'latin-ext', 'greek'],
  axes: ['wdth'],
});

I only understood my mistake when I saw this line of code:

next.js/packages/font/src/google/validate-google-font-function-call.ts

Line 138 in 74a19b7

if (weights[0] !== 'variable' && axes) {

I guess that I read better code than English 😅

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.