[QUESTION] subset possibilities per font

support
1

I would like to describe my current situation and what I think would be cool if Hugo could do. I like websites fast, that’s why I go for SSG’s and for web optimization. On my latest journey I reached the limit of what I was capable of doing but didn’t wanted to give up, thats why I am here now.

I like fonts slim and clean, no unneeded overhead and other stuff. There are also currently a lot of programs and tools available to automatically subset fonts, but for all of them you need to provide a list, or array of characters which you want to keep at the end, basically which forms the subset.

And that’s where the problem is. I think a static subset does not make sense, as the content might (hopefully) change and the subset would not match anymore. This results in: the subset must be calculated:

  1. on each change
  2. for each font separately

I could solve the first problem, since I can simply run a script that gets all characters from a HTML document, but I fail at the second requirement since all these characters are not getting use on ALL of my fonts.

In fact, I have a font, just for headlines. They obviously contain a very small character list, while the font for content does have a way bigger characterlist.

So the issue for me right now is that I have no way of passing an array of HTML to a program/script which then just outputs me all used fonts and their perfect, minimal character list.

Like:

$ hugo -charList
{
"Poppins":"0123456789ÄÖÜABCDEFGHIJKLMNOPQRSTUVWXYZäöüabcdefghijklmnopqrstuvwxyz-,.&§ß?!©",
"Montserrat":"ÄACDEFHIKLMOPSTVWXYZäöüabcefghjklmnorstvxyz§"
}

something like this. Which would mean, Hugo crawls through all “.html” files and combines all the character lists eg. creates a global valid character list for each font.

I thought this maybe also would be a nice feature if Hugo could (while building the pages) crawl through them and check for character lists and in the end subset fonts, or at least output the character list used for each font.

Happy to discuss about this topic.

Thanks in advance.

2

That’s not something Hugo can do for you. To create a font subset you create your site, then hand it over to a tool like Glyphhanger or something newer.

Back when I dabbled into font-subsetting the tools weren’t quite good enough yet to catch some special characters (German umlauts and stuff like that). Encoding will be an issue, so go sure to work everwhere with UTF-8.

3

I actually stumbled across glyphhanger yesterday, but actually it need a LOT of dependencies. Its not done, with npm install -g glyphhanger. For me this anyway does not work.

I was able to get all subsets also with german umlaute, but have to search in my backups if I might find this code snipped again, since I ATM work with static subsets, which is not ideal.

I accept, that Hugo is not able to do this and I know this is a hugo forum, but any hints on what other scripts/programms (beside glyphhanger) can create such subsets on a per font base?

Best regards, and thankd in advance!

4

I use Fontsquirrel for font subsetting.

5

Thanks, but I need something that (like mentioned above) is automatable. Fontquirrel is a webapplication, not made for CLI.
It will not be executed automatically whenevery someone changes content on the webpage.

6

Poppins in woff2 format are less than 10ko per font. So ~40ko for 400, 400i, 700 and 700i.

My strategy: put the fonts in a separate directory, with a version number. And apply an immutable cache rule.

There is more to gain with a good font strategy (number of fonts, number of widths, file type, preload or not, cache, default font-stack, etc.) than by optimizing the number of characters used.

NB: You can have a better optimization with a variable font. I would use a variable font if I had more than 2 widths.

See also:

As this is not specific to Hugo, I won’t say more here.

7

Thanks for your input. I just have two fonts, both together are 15Kb, so there is nothing I can optimize here anymore, I specifically wanted to automatically gegerate the perfect subset automatically.

Also: all the other tips are already implemented. Thanks anyway.

1 Like