8

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?

Community
  • 1
  • 1
Colonize.bat
  • 188
  • 1
  • 11
  • Do not add back in irrelevant tags/fluff. The sass tag was removed on purpose: this is not a Sass problem. – cimmanon May 25 '15 at 15:54

2 Answers2

5

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

GonzaloT
  • 61
  • 1
  • 5
  • Doesn't seem to change anything. Specifying "subset" doesn't change the font generated by Google Fonts. https://fonts.googleapis.com/css2?family=Manrope&display=optional vs https://fonts.googleapis.com/css2?family=Manrope&display=optional&subset=latin – Vadorequest May 09 '21 at 15:51
  • 2
    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: https://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 – GonzaloT May 10 '21 at 16:32
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');
}
Leo
  • 849
  • 7
  • 20