Reduce the fonts file size

[renintw]

Ref: https://wordpress.slack.com/archives/C02QB8GMM/p1660640323188989?thread_ts=1658956086.933959&cid=C02QB8GMM

The fonts files seem larger than usual, let's see if we can reduce their sizes.

[ryelle]

The fonts have already been compressed into woff2 format.

Inter was downloaded from the 3.19 release here, and it's Inter Web/Inter-roman.var.woff2 & Inter Web/Inter-italic.var.woff2, the variable versions so that we have access to all weights.

EB Garamond was downloaded from google fonts, and the variable ttf files were converted into woff2 with woff2_compress.

[tellyworth]

What's a reasonable font file size for a page like ours to compare to? Is ~800 kb of fonts a lot or perfectly normal?

[renintw]

After having more understanding of the web font, I guess because it has a great number of glyphs in Inter and we use the variable version so the size is normal as far as I'm concerned.

But I'm wondering do these two thoughts make sense for our scenario?

1. Serving critical font variants first, with other variants downloaded later
2. Subset the font files so that users aren't forced to download subsets that they may never see or use on the page

[ryelle]

Serving critical font variants first, with other variants downloaded later

Since this is a variable font, we can't separate out the variants like that. If we did switch back to non-variable, or download only 1 or 2 weights first, it wouldn't save us much. Looking at Inter, the variable font is 227KB. If we only download regular (99KB) & bold (106KB), that only saves us 22KB, and I'm not sure how many weights are actually used on the site.

Subset the font files so that users aren't forced to download subsets that they may never see or use on the page

It's worth trying, but these fonts don't support CJK which is where you see the most savings when subsetting, as far as I know. We could test out subsetting Cyrillic & Greek and see how much it helps.

[tellyworth]

I found a couple of tools that might help:

https://github.com/johncf/ttf2web https://github.com/ecomfe/fontmin

If we're removing glyphs we'll need to figure out how that affects translation too.

Sounds like it's worth trying a few quick experiments to see how much this would actually save.

[ryelle]

@renintw How's this going? Have you been able to reduce the font sizes at all?

[renintw]

@renintw How's this going? Have you been able to reduce the font sizes at all?

@ryelle, yes, it can be reduced.

The current status is that originally I used the tool glyphhanger introduced by Inter and tried to reduce font sizes for wp.org with the idea in the post by the author of glyphhanger. The result went well, the size was reduced from 277KB to ~35KB with the crawling strategy which would return the Unicode range used by sites.

But I think this would only work for EN version sites, not for other rosetta sites, and it probably required creating font files every time deploying a dotorg site, so I originally left some messages sharing some ideas and asking you questions about it in the DM. But I happened to get an idea from a chat with Alex (Here's what he shared: "perhaps we could produce a unique font file for each locale. Either based on glyph ranges that we know are needed for each locale, or maybe dynamically based on the actual glyphs in the content").

Then I followed the thought to search for a solution, and during the search, I found that this post from web.dev has been updated recently, probably in the mid of last week and this good article was also found which I think once it's implemented, it can also be applied to rosetta sites. So I'm currently working on changing the logic based on the article and the new insight shared in the updated web.dev post.