Next.js Discord

Discord Forum

Variable Fonts - File Size and Recommended Usage

Unanswered
Schneider’s Smooth-fronted Caima… posted this in #help-forum
Open in Discord
Schneider’s Smooth-fronted CaimanOP
The default fonts included with next@latest are so tiny in filesize:
GeistMonoVF.woff - 68KB GeistVF.woff - 66KB

But when I download Inter variable font from Google Fonts, they are much bigger:
Inter-Italic-VariableFont_opsz,wght.ttf - 905KB Inter-VariableFont_opsz,wght.ttf - 875KB

First, why do we have a different Inter font file for italic? (The Geist font does not support italic?)
Second, does Nextjs automatically compress variable fonts based on the fonts that you are actually using?

Should I be doing any conversion or compression to these .ttf source files before using them on my Next project, or is it gonna be easy breezy to let Next handle that for me automatically?

Curious why those Geist variable fonts are so much smaller than the Inter variable fonts?
Even the static Inter fonts (54 in total) are 18.7 MB in combined filesize (.ttf, 350KB each)

I would have thought variable fonts would be larger in filesize than static fonts because of combined weights and axes. With the Inter variable font it looks like it uses the following 2 axes: opsz, wght but I'm not sure about Geist, as it's not mentioned in the filename?

Thanks!

0 Replies