I'm struggling with using the Roboto fonts in Chrome, specifically with getting Condensed and Thin/Light font weights. I have downloaded all three complete fonts:
@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext,cyrillic-ext,cyrillic,greek-ext,greek,vietnamese);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,latin-ext,greek-ext,greek,vietnamese,cyrillic,cyrillic-ext);
Then I try to use them in declarations like:
Roboto Condensed
.mas-1st-col {
font-family: Roboto !important;
font-size: 8pt; !important
font-weight: 200 !important;
font-stretch: condensed !important;
}
Roboto Light
span.f, div.f.kv + div.f.slp {
font-family: Roboto !important;
font-size: 8pt !important;
font-weight: 200 !important;
}
However, it always shows plain Roboto. Changing to "Roboto Condensed" does work due to Chrome's delay in adopting font-stretch, but setting it as "Roboto Condensed" doesn't apply the lighter font-weight (which is 300). Even specifying the font-weight as 300 doesn't change it from 400. Using "Roboto Condensed Light" specifically works for the light font-weight.
And what about "Roboto Thin"? It wasn't downloaded or set in a @font-face... Should I really have to specify "Roboto Thin" instead of just using the font-weight?
Details
Following Terry's suggestion, here is the relevant code almost in full:
function _miscCSS () {
var css = function(){/*
@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext,cyrillic-ext,cyrillic,greek-ext,greek,vietnamese);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,latin-ext,greek-ext,greek,vietnamese,cyrillic,cyrillic-ext);
...[css declarations follow]...
*/}.toString().slice(14,-3);
return css;
}
var misc_css = '<style>'+ _miscCSS() +'</style>';
jQ(misc_css).appendTo('head');