Woff webfont has enormous size

[ingria]

At the moment, all the "Material Symbols" webfonts presented at fonts.google.com have enormous size. For example, "material rounded" weights 3.6 megabytes:

That's more than 2 times larger than the page total size recommended by Google:

https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight/#how-to-reduce-payload-size

Maybe it's possible to subset the font to include only some of the icons?

[sonusharmawevdev]

use this tool to reduce font size https://www.fontsquirrel.com/tools/webfont-generator

[tphinney]

Reducing size is good.

The full font includes about 3000 icons. It also has four variable font axes, so each of those icons is present in nearly endless variations. You almost certainly don’t need to host all of that.

[ingria]

@sonusharmawevdev it doesn't support woff

[tphinney]

It is perfectly reasonable to use one tool to subset the font, and then another to export to WOFF. Yes, it is an extra step, but there is no technical reason not to do it.

The main subsetting problem for Material Symbols (and Material Icons for that matter) is something else: the way the icons are made available via ligatures causes most automatic subsetting tools to want to include all the icons, if you include the a-z etcetera (which you need to support the ligature behavior). A sophisticated subsetter tool can be told exactly which glyphs to include, but that process would definitely be a significant hassle.

[ingria]

I know that there are ways to reduce the font size using third-party tools. The problem is not with the font itself, but with the Google Fonts web service.

No matter how many icons do you need, it provides the following code:

https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200

This line is supposed to be included on the webpage, and it loads the following CSS:

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v124/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
}

...which in turn loads that huge woff file.

What I am trying to say is that Google Fonts service is supposed to provide convenient and fast way to use web fonts, but in case of Material Icons it doesn't. It is still convenient, but unusable because of the super heavy asset size.

I know that the Google Fonts backend is capable of dynamically changing the font. For example, this link generates the subsetted font with only HELO letters inside:

https://fonts.googleapis.com/css2?family=Inconsolata&text=HELLO

Maybe it's possible to teach the backend to also understand and subset ligatures in Material Symbols?

[tomasdev]

Subsetting a variable font is a non-immediate process, hence providing an API for dynamically subsetting it will take longer than users may want.

I'm thinking on contributing to npm a subsetter module with inputs axes and ligatures and then everyone can integrate in their build tool of choice

[ingria]

Subsetting a variable font is a non-immediate process

This only needs to be done once. The result is then cached and can be served instantly (google font subsetter works this way at the moment).

[tomasdev]

Once per combination. There are 3000+ icons. The possible combinations that fit within max URL spec, is too high.

On Sat, Aug 5, 2023 at 10:14 PM Ingria @.***> wrote:

Subsetting a variable font is a non-immediate process

This only needs to be done once. The result is then cached and can be served instantly (google font subsetter https://fonts.googleapis.com/css2?family=Inconsolata&text=HELLO works this way at the moment).

— Reply to this email directly, view it on GitHub https://github.com/google/material-design-icons/issues/1542#issuecomment-1666680074, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACY4APP3Z7P4YEDCAYMN4DXT34XXANCNFSM6AAAAAA2GHF4JM . You are receiving this because you commented.Message ID: @.***>

-- Tomás Roggero https://tomasroggero.com

[Whip]

I specify exactly the weight, grade, size. The only variation I keep is Fill on/off but the file is still over 300kb and its too much. I don't need 3000 icons to lug around. Is there a tool that can do the aforementioned subsetting? I tried Fontforge but it can't seem to understand the file well. Maybe if there was a otf format, that would work better.

[MarcoTroost]

Nobody uses the complete library of Material Symbols. I love the fine-grained control over the icons, but nearly 3 MB makes the variable font unusable for production. For now, we just use the static font. This file is smaller, but still 1 MB. Subsetting seems a must have for this initiative.