Subsets are not being loaded

[JanisE]

I'm using the approach to load several subsets of a font (so, several font files):

google: {
    families: [
        'Exo:400:latin,latin-ext',
    ]
},

It is not working. Only the latin subset file is loaded. latin-ext is still loaded only once the browser encounters a need to use it for rendering.

See a demo fiddle here: https://jsfiddle.net/janise/7c508q09/17/

---

Also, if I list each subset as a different array element, it does not work sometimes. Exo font seems to be all right, but there is a problem with, for example, Oswald font.

It has two files (one contains latin subset, the other one contains the rest supported subsets (latin-ext, vietnamese, cyrillic)). If latin, latin-ext, vietnamese are requested, both files get loaded all right. However, if one of the requested subsets is cyrillic, only the latin file gets loaded.

See the demo fiddles here:
https://jsfiddle.net/janise/7c508q09/44/ – the request includes cyrillic (and does not work correctly)
https://jsfiddle.net/janise/7c508q09/45/ – the request does not include cyrillic (and works all right)

[alexaaaant]

I have exactly the same problem. Have you solved this problem?
I am trying to download two languages, but only one is loading stackoverflow

[JanisE]

I worked around the problem by inserting an invisible (opacity = 0) text element somewhere on the page containing a character of each subset and dynamically setting its font face to each of the necessary fonts, one after another, thus making the browser actually load all the font subsets. It was done upon Web Font Loader's active event.

I'm not sure if doing it this way it's possible to detect precisely when all those subsets become actually available. So, there should be some kind of a pause between loading the subsets and trying to use them.

[html5maker]

I have exactly the same issue with Google Font subset (latin,greek):
On active event I'm displaying text that contains greek but it shows backup font for a second (greek is loading after "active" event.

[maciejha]

I worked around the problem by inserting an invisible (opacity = 0) text element somewhere on the page containing a character of each subset and dynamically setting its font face to each of the necessary fonts, one after another, thus making the browser actually load all the font subsets. It was done upon Web Font Loader's active event.

I'm not sure if doing it this way it's possible to detect precisely when all those subsets become actually available. So, there should be some kind of a pause between loading the subsets and trying to use them.

You can also use WebFontConfig.google.text parameter:

WebFontConfig = {
  google: {
    families: ['Lato', 'Roboto', 'Open Sans'],
    text: 'āąăćĉď' // <- subset characters here
  }
};

[nuthinking]

@maciejha it doesn't look like the text property in the config is a viable solution. Despite in the documentation it says that it's used for subsetting. It really seems to load only the characters specified.

@JanisE I'm interested in hearing more about your solution and how it works within the loader events. Thanks!

[JanisE]

Sorry, that project is done and forgotten long ago. :) My comments above is the most I can give you. :)

BTW, I'm not sure how webfontloader works, but if the parameters match Google Font API, then maybe "subset" even is not a supported parameter anymore and has no effect.

---

As a side-note, I recently had an unexpected use for the "text" property. I didn't use webfontloader, just manual <link> tags. I wanted to output an infinity character, which is included in the Noto font. However, Google fonts (https://fonts.googleapis.com/css?family=Noto+Serif) outputs only latin, cyrillic, greek, and vietnamese subsets, even though the Noto font contains more characters.

So, I ended up including the font a second time by passing the infinity character. And it all seems to merge together in the browser well, and work.

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=block" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=block&text=%E2%88%9E" rel="stylesheet">

[nuthinking]

@JanisE if one day you remember how you solved it, I'm here 🙂