New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Clarification Needed: Using axes
Property with Variable Fonts in next/font/google
#64960
Comments
Ported this this from Discussion 64959 |
I've stumbled upon this with the font Sono is a little special in that it's It seems that controlling this value is actually entirely impossible, and maybe that's cause for another issue? Everything below is informational (my workaround), and is unrelated to the issue requesting more documentation. To have actual control of the We'll first need to explicitly ask Google Fonts for the version of this font that has a const sono = Sono({
weight: "variable",
subsets: ["latin"],
variable: "--font-sono",
axes: ["MONO"]
}); Then, using Tailwind we can override this value. theme: {
extend: {
fontFamily: {
heading: [
'var(--font-sono)',
{
fontVariationSettings: '"MONO" 0'
}
]
}
}
} Another one of those with If I chose not to use Tailwind here this would be much harder (impossible?) but hopefully anyone with this issue who stumbles upon this comment finds a solution in the meantime. |
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: