Manipulate Unicode range when importing from Google Fonts
My question can be seen as a continuation of the answer.
I am using 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 cannot work with include:
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");
When I import a font like this, the font is already created by Google (Google provides the correct font setting as well to avoid cross-browser issues, very handy). I tried rewriting the imported font this way:
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
unicode-range: U+30-39;
}
But it didn't work. To achieve the desired effect of attaching just a number, I need to grab the CSS from the google import url and copy it into my own CSS / SASS document. But then I lost the cross browser that the Google Fonts API was running and also the speed of their CDN.
Is there a way to change the unicode range while still keeping the Google font importing, or do I really have to host the fonts myself when I want to use the unicode range?
source to share
If you want to set the range during import, just add the "subset" variable to the link.
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 the text and add content inside.
For example:
@import url("http://fonts.googleapis.com/css?family=Inconsolata&text=Hello");
source to share