How to get correct subset per font

[the-hotmann]

My case:

There are so many NPM packages to stripe away everything beside a list of characters, but no package that I know of to automatically detect the right "perfect list of characters" per font.

I want to implement this on a webpage. Which does have multiple subsites like:

index.html -- subpage1/index.html -- subpage2/index.html -- subpage3/index.html

And on each of them I use exactly two fonts:

1. Font for headlines
2. Font for content

Obviously I dont want to define a static list of characters for each font, but I would rather like to find out the perfect minimal list of chars each of these fonts need to display all characters it actually uses.

So is there a way "subset-font" can detect with the given input like:

subsetFont ./**.html --font="Roboto"

which the correct and minimal subset-list for this font is and it needs to diaplay all it's characters which are actually getting used??

Best regards

[papandreou]

Hey Martin, try giving subfont a shot. It'll analyze your HTML+CSS (using font-tracer), find out which characters are used from each webfont, then use this package to generate the subsets and update your CSS to use them and apply some other optimizations.

It's a "fully integrated" solution (for better or worse).

[the-hotmann]

Thank you very much for your reply! I actually dont appreciale such "fully integrated" solutions if their modular parts are not usable by its own.

font-tracer looks very promissing, there is just no documentation on how to use it alone. Like installing it with npm and then just:

npm font-tracer **/*html but like I said, there is no docu on this. Would have liked that extension. Thanks for that! The subfont extension isnt bad, but I also there do not see any way of "just" getting the perfect subset on font base.

[the-hotmann]

Actually I have tried subfont and it works fine. Will create some FRs there, as I think there is a little bug, or at least min one option missing. But like it so far.

Thanks!

[papandreou]

Yeah, font-tracer is a library without a cli. It requires a DOM and is a bit tricky to use. One of these days I'll clean it up and write some docs. Overall I agree with your points about modular parts, it's just not always how things are first conceived 😅

Hopefully we'll get there. I think there's a potential to have tracing / subsetting / self-hosting fonts / injecting preload tags etc. live in separate modules, or at least be divided into more well-defined and optional steps inside subfont.

See you over there :)