Variable Local Fonts With Next.js
How to properly load variable local fonts with multiple style variants in Next.js?
Next.js has a font module load local and google fonts but their documentation isn't clear on how to load variable local fonts properly.
I have tried to use Inter variable font on my website and waned to share how I did it.
weight: "100 900" was important here. This is not documented clearly in Next.js documentation, and without it all my font weights were being synthesized from single regular weight.
From here, the documentation is pretty clear. You just add
body tag, prepend
var(--font-sans) to your
font-family and you are set.
The code snippet in this post also uses a
unicode-range. To read more about it you can read this post.