Inspiring

Question

Variable Fonts are massive file sizes

Forum|Forum|2 years ago
April 19, 2023
9 replies
5528 views

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?

Performance

This topic has been closed for replies.

K

Kjetil5E91

New Participant

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.

B

Bobby Henderson

Community Expert

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.

K

Kjetil5E91

New Participant

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.

M

Micah Lindstrom

Participating Frequently

Web loading speed is not just filesize but also quantity of file requests. Cloudflare explains, "Each request results in a round trip to and from the server hosting the resource, which can add to the overall load time for a webpage."

It's also the entire reason behind CSS Image Sprites. Instead of the webpage sending 3 requests for 3 images, it can send a single request for a single file which includes 10 images, then only display the few images actually used. Although it's a bigger filesize, it improves website performance with improved caching and fewer file requests.

Of course there's a tradeoff between filesize and number of requests, but I am inclined to think a single 640kB font file is generally better than three separate 16kB font files.

M

markeeeeeAuthor

Inspiring

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.

K

Kjetil5E91

New Participant

My team is using Acumin variable in a web project and are at the end-phase of the project, testing performance and page-speed. We're shocked to notice that the font file is the largest file on the frontpage: 640 kb. Omitting opentype-features reduced the size by about 30%, but a font-file of over 400 kb is still too large. What will improve this a lot is switching from variable back to individual styles. Those files are around 20 kb each. Also, only the styles used on a page are loaded. I would prefer not to go backwards in time here, though. We work mosty with the public sector, where requirements for file sizes, accessibility etc. are more strict.

M

markeeeeeAuthor

Inspiring

Yep. Variable fonts are being promoted as smaller files sizes, but often they are massively bigger than using a few individual styles.

B

Bobby Henderson

Community Expert

I can't recall ever seeing Variable Fonts promoted as having smaller file sizes than traditional "static" fonts. The only scenario where I see file size savings being possible is by adding up all the possible instances of variable fonts, particularly ones that have two or more variable axes. We're talking thousands or even millions of possible static font files.

Any Varible Font file is going to have numerous master instances, versions of a glyph, that mark the key frames of how the glyph will change along a variable axis. That could be weight, going from thick to thin, or width, going from compressed to normal or wide. A lot of versions of each letter or glyph in the font file have to be drawn out. Naturally, all of these different masters contained within the font file will lead to a bigger file size. One font file can duplicate an entire type family.

I love variable fonts and use them frequently in my design work. When I'm considering buying a new type family its variable font features will be a factor in the purchase decision. I've never liked the crude, ugly practice of artificially squeezing and stretching letters to make them fit in a certain space. I've grown to really hate the default Arial typeface because I see it artificially distorted so often on badly designed signs. Variable fonts can provide a vastly superior looking step above that junk.

jane-e

Community Expert

Uh, what does divorce laws in Florida have to do with this conversation? Sniff sniff, I smell spam.

Uh, what does divorce laws in Florida have to do with this conversation? Sniff sniff, I smell spam.
By @Bobby Henderson

I've sent the post to spam. If you are a moderator, you can do that yourself. If not — use the Report button.

Jane

B

Bobby Henderson

Community Expert

Uh, what does divorce laws in Florida have to do with this conversation? Sniff sniff, I smell spam.

M

Mark313072581wb2

New Participant

Thanks.

In Adobe Fonts how is it possible to reduce the axes and and values of a variable font?

So the size of the variable font file does not change depening on the number of axes and values used

Tarun Saini

Community Manager

Hi @Mark313072581wb2,

Please check this article and let us know if that helps: https://helpx.adobe.com/fonts/using/using-variable-fonts.html

Regards,

Tarun

M

Makai29818296c6ui

New Participant

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.

T

Test Screen Name

Brainiac

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).

M

markeeeeeAuthor

Inspiring

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

Tarun Saini

Community Manager

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

M

markeeeeeAuthor

Inspiring

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

Community Manager

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded