Manipulate unicode-range while importing from Google Fonts

Question

My question can be seen as a follow-up of this answer.

I use Google Fonts for my project and now want to change the unicode-range, so only numbers are affected (see linked answer above). My problem is that I don't get it to work with an include:

@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");

When I import the font like this, the font-face is already generated by Google (Google provides also the correct font-face setup to avoid cross browser problems, very convenient). I tried overwriting the imported font-face like this:

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  unicode-range: U+30-39;
}

But that didn't work. To achieve the desired affect of having only numbers attached, I need to take the CSS from the Google import URL and copy it into my own CSS/SASS document. But then I lose the cross browser service that was done by Google Fonts API and also the speed of their CDN.

Is there a way to change the unicode-range while maintaining the Google font import or do I really need to host the fonts myself when I want to use unicode-range?

Vito

Do not add back in irrelevant tags/fluff. The sass tag was removed on purpose: this is not a Sass problem. – Telephotography

Answer 1

If you want set the range while you are importing, just add to the link the variable 'subset'.

For example:

@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin");

Or, if the text is very small you can change the subset variable for text, and add the content inside.

For example:

@import url("http://fonts.googleapis.com/css?family=Inconsolata&text=Hello");

Documentation

Figurant

Doesn't seem to change anything. Specifying "subset" doesn't change the font generated by Google Fonts. fonts.googleapis.com/css2?family=Manrope&display=optional vs fonts.googleapis.com/… – Jere

Keep in mind that this answer was on V1 Google Font API. Now, when visiting from a browser that supports UTF-8, it basically declares all the subset so the browser downloads what needs only. Although if you want to check, a curl call should give you different results. More info in the official Google font repository issue 113: github.com/google/fonts/issues/113 You may want to reduce the load by specifying the weights you are going to use and display=swap – Figurant

subset IS in fact supported in their docs (developers.google.com/fonts/docs/getting_started#Subsets) and it also says latin is included, but it still didn't work for me. I ONLY need latin. I ended up referring to this SO post: https://mcmap.net/q/462469/-how-can-i-only-use-latin-subset-with-google-fonts-woff2-files and using &text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-%2F (%2F is url encoded slash) – Casefy

Answer 2

What is unicode-range?

It's a prop used to tell the browser when to download a font file. As soon as any character that belongs to the given range is rendered: the font file is downloaded.

The unicode-range is not intended to assign the style to the characters from the given range .

Solution

The best option is to use the text parameter to get a font file per style that contains just the characters you need, in this case the range [0-9].

URL:

https://fonts.googleapis.com/css?family=Lato:300,400,700&text=0123456789

Google Fonts response:

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/l/font?kit=S6u9w4BMUTPHh7USewqdFhfZ3-4B28Jv7vc&skey=91f32e07d083dd3a&v=v22) format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=S6uyw4BMUTPHvxwiUT-eLhTc2OsC1s0&skey=2d58b92a99e1c086&v=v22) format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/l/font?kit=S6u9w4BMUTPHh6UVewqdFhfZ3-4B28Jv7vc&skey=3480a19627739c0d&v=v22) format('woff2');
}

Fright