lumeland/lume

Ability to filter character ranges in google fonts plugin

RickCogley opened this issue · 4 comments

RickCogley commented

Enter your suggestions in details:

I tried out the google fonts plugin and it works like a charm, really good work! It's clever to name the font files text-nnn.woff or display-nnn.woff so that you can just specify the generic name in your css, then refer to it no matter what font you decide on.

But a question: I noticed in the generated css and downloaded fonts, that there are many additional character ranges for cyrillic, vietnamese, greek etc, and since I won't be entering text in these, is there any way to suppress those ranges? Just seems like it will use up disk space for no reason.

I read somewhere that the browser will download only the fonts it needs, that are on the page, and I saw some forum posts on this topic, related to google fonts, but I was hoping it would be possible to filter the unneeded ones out.

RickCogley commented

hi @oscarotero , thanks for rolling this out in v2.5.0. Just a question, given:

site.use(googleFonts({
  cssFile: "styles.css",
  placeholder: "/* lume-google-fonts-here */",
  fonts: {
    display:
      "https://fonts.google.com/share?selection.family=Alegreya+Sans+SC:wght@300",
    text:
      "https://fonts.google.com/share?selection.family=Alegreya:ital,wght@0,400..900;1,400..900",
    textjp:
      "https://fonts.google.com/share?selection.family=Zen+Maru+Gothic:wght@700&display=swap",
  },
}));

... how and where do I specify the subset array? I tried a few things but keep getting errors.

Also, if I look at my _site/fonts folder (screenshot below), I see the subsets that were downloaded for the non-Japanese font, but for the Japanese font there's no subset in the font name. Presumably that means I can specify for the non-Japanese font, but to just leave the Japanese one as default or non-specified?

Appreciate your help as always.

JRC CleanShot Code 2025-01-12-173308JST@2x

oscarotero commented

The subset option is an array of subsets. It's applied to all fonts:

site.use(googleFonts({
  subsets: ["latin", "cyrillic", "vietnamese"],
  // ... more options
}));

Take a look to the Options section in the plugin's documentation page: https://lume.land/plugins/google_fonts/

The plugin parses the CSS file returned by google fonts. The subset name is specified as a comment before every @font-face declaration.

As you can see in the Zen Maru Gothic font, some subsets has no names but numbers. I have no idea what this mean, but is how Google returns it.
The output filename is a combination of {fontName}-{fontStyle}-{fontWeight}-{subset}. So textjp-normal-700-8.woff2 is the correct name (the subset is the latest number). Sometimes, the font weight is a range of two values, like 400-900. This is why you can see text-normal-400-900-latin.woff2.

RickCogley commented

thanks, got it! First I tried [subsets]: ["latin", "latin-ext", "2", "3", etc] but it does not work. So referring to the css you linked, it's literally "[2]", "[3]"... so that's what I tried next, and it works. Here's the working configuration:

site.use(googleFonts({
  subsets: ["latin", "latin-ext","[2]","[3]","[4]","[5]","[6]","[7]","[8]","[9]","[10]","[11]","[12]","[13]","[14]","[15]","[16]","[17]","[18]","[19]","[20]","[21]","[22]","[23]","[24]","[25]","[26]","[27]","[28]","[29]","[30]","[31]","[32]","[33]","[34]","[35]","[36]","[37]","[38]","[39]","[40]","[41]","[42]","[43]","[44]","[45]","[46]","[47]","[48]","[49]","[50]","[51]","[52]","[53]","[54]","[55]","[56]","[57]","[58]","[59]","[60]","[61]","[62]","[63]","[64]","[65]","[66]","[67]","[68]","[69]","[70]","[71]","[72]","[73]","[74]","[75]","[76]","[77]","[78]","[79]","[80]","[81]","[82]","[83]","[84]","[85]","[86]","[87]","[88]","[89]","[90]","[91]","[92]","[93]","[94]","[95]","[96]","[97]","[98]","[99]","[100]","[101]","[102]","[103]","[104]","[105]","[106]","[107]","[108]","[109]","[110]","[111]","[112]","[113]","[114]","[115]","[116]","[117]","[118]","[119]"],
  cssFile: "styles.css",
  placeholder: "/* lume-google-fonts-here */",
  fonts: {
    display:
      "https://fonts.google.com/share?selection.family=Alegreya+Sans+SC:wght@300",
    text:
      "https://fonts.google.com/share?selection.family=Alegreya:ital,wght@0,400..900;1,400..900",
    textjp:
      "https://fonts.google.com/share?selection.family=Zen+Maru+Gothic:wght@700&display=swap",
  },
}));

Those many subsets in the Japanese font refer to specific unicode ranges that can be excluded if you want. I need to research it more, but for example the range specified in the css for the [2] subset, or U+ffd7, U+ffda-ffdc, U+ffe0-ffe2, U+ffe4, U+ffe6, U+ffe8-ffee, U+1f100-1f10c, U+1f110-1f16c, U+1f170-1f1ac, U+1f200-1f202, U+1f210-1f234;, has some characters from:

https://en.wikipedia.org/wiki/Halfwidth_and_Fullwidth_Forms_(Unicode_block)

Besides the hiragana and katakana phonetic syllabaries the above range includes Korean hangeul characters as well, so I think after some research, I can decide which subset to load based on what kind of Japanese text I'll be using. Overall, there are the syllabaries, as well as about 3000 general kanji, of which maybe 1500 or so are "everyday use".

In the end, what's being loaded is slimmer, because I was able to remove the Greek, Cyrillic and Vietnamese subsets, which I know I won't use. Thanks!

oscarotero commented

Ok, I see the confusion due the different subset name in the configuration, the CSS comment and the output file.
Probably the output filename should be textjp-normal-700-[8].woff2. I'll change that.