I'm using three font weights of a 'normal' 'static' typeface (Acumin) Each web font file is 16KB. I've been reading how Variable Fonts are super fast to load because it is only one file. But the Variable Font version of the same typeface is 640KB. x40 the size of individual weights. I'd have to use over 40 different weights to see a speed improvement on my website if I use the Variable Font.
Why all the fuss about Variable Fonts being small file sizes and fast to download? Am I missing something?
Thank you for your post. Very interesting. When I get the time I'll compare the load time of one 604kB variable font against three 16kB fonts, and report back.
/t5/adobe-fonts-discussions/variable-fonts-are-massive-file-sizes/m-p/14914393#M10994Oct 14, 2024
Oct 14, 2024
Copy link to clipboard
Copied
My main concern here is that the file size of this particular variable font is huge, way larger than any other variable font I've come across. I'm not sure if it's only this font or if it applies to Adobe Fonts in general. Variable fonts I've used from other providers have all had larger file sizes than the static alternatives. That's both understandable and acceptable. But they have all usually been below 50kb... so less than 1/10 of this.
Variable Fonts do not have standard file sizes. Any variable font is usually going to be bigger in file size than a static font unless that static font has thousands of glyphs.
Some variable fonts may have modest file sizes, but then those fonts may have only one variable axis, such as weight. The glyphs may be sans serif in style. Teko is one example; the font file is 267kb in size. If the font has multiple variable axes it's probably going to be bigger in file size. The same goes if it has a larger character set or if the glyphs are more complicated. Roboto Serif has four variable axes and more complex glyphs. The upright style is 2703kb in size and the italic style is even bigger, 3361kb. The static styles are less than 10% of those file sizes. But there is a whole lot of static styles in that package.
From what provider are the files you are referring to? I just tested downloading the the Roboto Serif google fonts woff2 file. It's 170kb. As for Teko, it's hard to know how a non-latin font compares in this case.
I'm talking about the file size difference in the desktop ttf files downloaded from the Google Fonts web site. As for Teko, while the typeface does have a Devanagari character set it also has a Latin character set too.
The "guts" of the font file are the same in principal. If you have a variable font boasting more variable axes, more elaborate character sets and/or more complex glyphs the font file sizes are going to be bigger.
As Micah Lindstrom pointed out, the variable font may well be considerably bigger file size, but only having to load one file could mean the varible font is quicker to load.
From my experiement comparing Acumin Variable font with three weights of Acumin static:
The variable font increases the KB transfered by x3
But the finish load time is only x1.3
My hunch is, Acumin Variable (despite being 38 times bigger than a static Acumin) is probably quicker to load than say five static weights of Acumin.
34
Replies
AdChoices