Clarification Needed: Using `axes` Property with Variable Fonts in `next/font/google`

What is the improvement or update you wish to see?

The current documentation for next/font/google lacks examples or explanations on how to utilize the axes property with variable fonts. Specifically, it is not clear how to set values for font variation axes such as width ('wdth'). A clear example and explanation in the documentation would be beneficial.

Is there any context that might help us understand?

In the type definition for Bricolage_Grotesque, there is an axes property that suggests the ability to control font variation axes. However, there are no details on how to specify the values for these axes. For developers looking to optimize font loading with specific variable font settings, this information is crucial.

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/basic-features/font-optimization

Where I'm currently at

I'm working on integrating the Bricolage_Grotesque variable font into my Next.js application using next/font/google. However, I'm having trouble understanding how to set specific values for the font's axes, such as width ('wdth'). The type definitions seem to indicate that axes is an array, but there's no clear way to assign values to each axis.

Additional information

// This does not specify a value for 'wdth'
export const bricolage = Bricolage_Grotesque({
  subsets: ['latin'],
  axes: ['wdth']
});

// Expected usage (or similar), which does not work:
export const bricolage = Bricolage_Grotesque({
  subsets: ['latin'],
  axes: {
    'wdth': 80.7
  }
});

• Next.js version: 14.1.3
• @next/font version: 14.2.2
• I checked the official Next.js documentation for guidance on this feature but couldn't find any examples or clear instructions on using the axes property.
• I attempted various syntaxes to assign a value to the 'wdth' axis, but none have compiled without errors.

The following will compile, but I don't know how to change the actual width value:

Things I tried that didn't work:

Another random thing I tried:

I also tried seeing if the wdth axes value would be configurable on the exported object, but that didn't work or lead me to anything... Based on the type definition of Bricolage_Grotesque, I am pretty confused on this one tbh.

Start with the linked Next.js font optimization documentation and the Bricolage_Grotesque type definition referenced in the issue. Determine how the axes option is intended to represent variable-font axes such as wdth, then document a working example and the value behavior. Done means a newcomer can configure the axis without trial and error.