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?

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