Clarification Needed: Using axes
Property with Variable Fonts in next/font/google
#64960
Labels
Documentation
Related to Next.js' official documentation.
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 theaxes
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 usingnext/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 thataxes
is an array, but there's no clear way to assign values to each axis.Additional information
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 ofBricolage_Grotesque
, I am pretty confused on this one tbh.The text was updated successfully, but these errors were encountered: