Variable Fonts are massive file sizes

[markeeeee]

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?

[Tarun Saini]

Hi @markeeeee,

We're sorry to hear about your difficulties. Please check this article and let us know if that helps in resolving the issue you're seeing: https://helpx.adobe.com/fonts/using/using-variable-fonts.html

Regards,

Tarun

[markeeeee]

I'm not having difficulties. I'm simply stating that one 'static' weight of Acumin Pro web font is 16kb. And the Acumin Variable Font is 640kb.

Yet on the article you link to it says "Variable fonts are contained in one font file which makes them faster to load on the web".

This is plainly untrue and misleading. In my example, a website would have to be using over 40 weights of Acumin, before the Variable Font was faster to load!

Is there a way to customise the Variable Font file, so that it only contains the axis / weights that a particular website needs – to reduce the file size of the Variable Font?

[Tarun Saini]

Hi @markeeeee,

We're sorry for the delay. I would like to inform you that subsetting Variable Fonts by axis/weight is unavailable. You can raise a feature request here: https://adobefonts.uservoice.com/forums/940222-adobe-fonts-feature-requests-and-feedback, as this link is monitored directly by our developers. They can review your post & may share some more insights.

Also, the weight/size savings, though, depend on how many distinct static fonts you would be utilising on the page in relation to the total VF size, in my opinion. It will be beneficial for a website that makes use of numerous fonts that are combined into a single VF with a few axes. You might not need to want to switch to a flexible font if your website just uses one or two fonts.

Regards,

Tarun

[Test Screen Name]

I'm interested in this. I'm curious how you get the sizes of the web font file, since Adobe Fonts doesn't give you a font file to measure. Also, looking at the TTF fonts on my system, the smallest real font is 130K, and many are over 1MB - I'm puzzled how a web font file could be just 16K. Figures state WOFF files ttypically manage around 40% compression, but less for the PostScript-based fonts used by Adobe (because they are already compressed).

[markeeeee]

I used my browser Developer Tools to Inspect the web page and the sizes of the assets, using the Network tab

[Makai29818296c6ui]

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?

By @markeeeee

In your case, since you are only using three font weights of a normal static typeface, it may not be necessary to switch to a variable font. The benefits of variable fonts, such as improved performance and flexibility, are more noticeable when using a larger range of design variations.

Ultimately, the decision to use a variable font or static fonts should be based on your specific design needs and website performance requirements. It's important to consider the overall file size and performance impact of any font files you use on your website.