Variable Fonts - File Size and Recommended Usage
Unanswered
Schneider’s Smooth-fronted Caima… posted this in #help-forum
Schneider’s Smooth-fronted CaimanOP
The default fonts included with next@latest are so tiny in filesize:
But when I download Inter variable font from Google Fonts, they are much bigger:
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!
GeistMonoVF.woff - 68KB
GeistVF.woff - 66KBBut 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 - 875KBFirst, 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!