How to use Roboto Light/Thin from google fonts in Chrome

23
votes

I am having trouble using Roboto fonts in the Chrome browser.. specifically I can't seem to get Condensed and Thin/Light, etc. font weights. I download all 3 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 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, what it gives me is plain Roboto. If I change the "Condensed" one to use font-family "Roboto Condensed" it works ... and that makes sense because apparently chrome is late to adopt font-stretch. However, changing the font-family to "roboto condensed" doesn't use the lighter font-weight (which is 300), it stays at 400. Even if I change the font-weight to 300, which it specifically has, it will remain at 400 (switching in the console between 200, 300 and 400 has no effect at all). I have to put "Roboto Condensed Light" specifically, to get the light font-weight.

And what about the others? "Roboto Thin" wasn't specifically downloaded or set in a @font-face ... I shouldn't have to use names like "roboto thin" when I just want a font-weight, should I?

Details

Because of Terry's great suggestion, here's the relevant code basically in it's entirety:

    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');
2
cssgoogle-chromefonts

2 Answers

18
votes

First of all — avoid using !important. There is very limited number of scenarios when this is actually necessary.

Roboto and Roboto Condensed are provided as two separate font families by Google Fonts, so if you want to use the condensed version, you will have to declare font-family: "Roboto Condensed" as the condensed variant is not included in the Roboto font family.

Roboto Condensed has also a more limited amount of font weights available: 300, 400 and 700 compared to Roboto's 100, 300, 400, 700 and 900. Simply speaking, using font weight of 100 and 900 will not work with Roboto Condensed, and will fallback to the nearest possible font-weight.

How can you confirm that Roboto Condensed is not using the 300 font weight? It seems to be working fine with me (I'm also using it on a few sites)... also working fine in this fiddle: http://jsfiddle.net/8k72a/1/

Therefore, it is not possible to get Roboto Condensed with a font weight of 100, for example.

With your updated question, why not use this script instead? I see that you have broken your CSS styles into several lines — remember to escape the linebreaks in JS with a backslash \:

var css = '@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);',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
19
votes

Css file (eg) (MaterializeCSS)

p {
  font-family:Roboto;
  font-weight: 200;
}