CODEWITHSUNDEEP
csswebfontsgoogle-font-apigoogle-webfontsgoogle-fonts
Jānis Elmeris
Jānis Elmeris

Reputation: 2045

How to load the glyph for a character, that Google Fonts is not passing by default?

I'm using "Noto Serif" font for normal text, and it is working fine. The Google Fonts URL is https://fonts.googleapis.com/css?family=Noto+Serif

However, that font face request does not return references for all the characters actually supported by "Noto Serif". It returns only latin, cyrillic, greek, and vietnamese subsets.

If I add the infinity symbol ("∞", U+221E) to the text, it gets displayed by a fallback font, even though "Noto Serif" does have a glyph for that character.

I tried to enforce a subset. I'm not sure what is the subset that would include "∞", maybe "math", if Google Fonts have such. However, the public API does not seem to support "subset" parameter (anymore?), and it seems to have no effect on the font request.

I see that a JSON API call with some access key supposedly supports parameter "subset". Is that the only way, if it even works for such case?

There is also an API parameter "text". https://fonts.googleapis.com/css?family=Noto+Serif&text=∞ does in fact return the "∞" glyph, however it returns nothing else. Is there a way to still return all the default characters and, in addition, also this "text" character?

I cannot just do both font requests, because the text one does not have unicode-range parameter, so they would override each other.

I could add manual @font-face CSS definition, but that would void the Google Fonts dynamic benefits of serving different replies to different browsers in a way they would understand best.

I could list all the characters in the text parameter... Resulting in a big query to get the font, and maybe miss some characters.

I could download the TTF font and host it locally, but that would void the benefits of not loading all the font files, containing a lot of glyphs that will never be used.

What is the best way to do this?

Upvotes: 2

Views: 1367

Answers (1)

Jānis Elmeris
Jānis Elmeris

Reputation: 2045

It turned out that loading the same font a second time doesn't actually override the first one, the browsers seem to be smart and merge them all right.

So, the solution I used is:

<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">

At first, load all the usual characters Google Fonts give you by default, and then load the font a second time and request specific characters in text parameter.

Of course, this works nicely only if you don't have too many of those extra characters that are needed...

Upvotes: 3

Related Questions