Implement subsetting with a webpack plugin?

[alanhussey]

Initially I’ve just added support for the Latin version of fonts. Would love to hear ideas for how to support other languages. Perhaps additional css files e.g. require('open-sans/greek')?

Is it possible to implement subsetting via a webpack plugin? Then you could ship the whole font (which would be ideal – feels like the default behavior should be to make the whole font available).

[KyleAMathews]

I'd rather it just work w/ normal Webpack settings instead of requiring people to need to install a specialized loader + adjust the webpack config. Also if someone is using create-react-app, they wouldn't be able to use a specialized loader.

Font files aren't large — I don't see anything wrong with shipping extra versions for different languages. And since it'd be scripted, we could ensure things are setup correctly.

Also perhaps it'd also make sense to just create additional packages e.g. open-sans-variant-greek or whatever.

[alanhussey]

Ah, all good points! Although I think it makes sense to keep the languages in the same package – lodash doesn't ship a separate lodash-arrays collection.

[jeznag]

I'd be keen for separate packages because otherwise it makes it very hard to use typefaces with serviceworker caching. I don't want to put unnecessary fonts into the SW cache but can't see a way to pick out the right ones as webpack will give each font an undistinguishable hash.

Would we do something like this for subsetting? Would need to automate it obviously. https://github.com/KyleAMathews/typefaces/pull/14/commits/e8fa9af6b0711829018399dbc536d41cfd7c73ab

[KyleAMathews]

For service workers & typefaces I'd just do run-time caching actually (ignore my comment on the other thread) as then you only cache the font files you're actually using.

Another option is to have a custom font-face css file that only pulls in the font files you need which would be quite doable as you could do relative links to the node_modules directory e.g. ./node_modules/typeface-lato/files/lato-latin-400.woff2.

[dmitrizzle]

@KyleAMathews Can you actually select which font style and weight we can use in the project? I'd hate to download five different thicknesses when I just need one.

[KyleAMathews]

Browsers have got your back! They only download the fonts that are specified for use in your CSS and there is HTML matching that CSS. Hence often font for italics don't load until the second or third page when there's some words that are italized.

[ArmorDarks]

Browsers have got your back! They only download the fonts that are specified for use in your CSS and there is HTML matching that CSS. Hence often font for italics don't load until the second or third page when there's some words that are italized.

Hm, never thinked about it. Need to test it out... Do all browsers behave this way?

But I believe there is still an issue with non-latin fonts subsets...

[KyleAMathews]

AFAIK yes.

On supporting other languages. We'd just need to modify the script to add support for generating font files with support for other languages as well as generating additional CSS files for each subset.

Happy to support anyone who wants to create a PR adding support for this.

[dmitrizzle]

Not true for mobile Safari, as I found. It downloads everything... At least in my case; might be due to the way the stylesheets are loaded (I'm using styled-components)

There's also no easy way to do require() in React app (it complains that all node module stuff is out of scope)

[FilipK23]

So is there some way to support other languages? (slovak,french letters) with Exo font letters like š,ž looks really bad with default font.

[schwigri]

Is there a way to utilize other languages? For example, Google Fonts offers many Japanese fonts but when installed through NPM only the Latin characters are loaded and not the Japanese characters. See M PLUS Rounded 1c, for example.