css - sans - Cómo utilizar Roboto Light/Thin from google fonts en Chrome

roboto thin css

Question

Estoy teniendo problemas para usar las fuentes Roboto en el navegador Chrome ... específicamente, parece que no puedo obtener pesos de fuente Condensado y Fino / Ligero, etc. Descargo las 3 fuentes completas:

@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);

Luego los uso en declaraciones como:

Roboto Condensado

.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;
}

Sin embargo, lo que me da es el sencillo Roboto. Si cambio el "Condensado" para usar la familia de fuentes "Roboto Condensado", funciona ... y eso tiene sentido porque, aparentemente, Chrome se retrasa en adoptar font-stretch . Sin embargo, cambiar la familia de fuentes a "roboto condensed" no usa el font-weight más font-weight (que es 300), se mantiene en 400. Incluso si cambio el font-weight a 300, que específicamente tiene, permanecer en 400 (el cambio en la consola entre 200, 300 y 400 no tiene ningún efecto). Tengo que poner "Roboto Condensed Light" específicamente, para obtener el peso de fuente ligero.

¿Y qué hay de los demás? "Roboto Thin" no se descargó específicamente ni se colocó en una @font-face ... No debería tener que usar nombres como "roboto thin" cuando solo quiero un peso de fuente, ¿debería?

Detalles

Debido a la gran sugerencia de Terry, aquí está el código relevante básicamente en su totalidad:

    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'');

Answer 1

Archivo CSS (por ejemplo) (MaterializeCSS)

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

Answer 2

En primer lugar, evite usar !important . Hay un número muy limitado de escenarios cuando esto es realmente necesario.

Roboto y Roboto Condensed se proporcionan como dos familias de fuentes distintas por parte de Google Fonts, por lo que si desea utilizar la versión condensada, deberá declarar font-family: "Roboto Condensed" ya que la variante condensada no está incluida en la familia de fuentes Roboto. .

Roboto Condensed también tiene una cantidad más limitada de pesos de fuente disponibles: 300, 400 y 700 en comparación con los 100, 300, 400, 700 y 900 de Roboto. En pocas palabras, usar el peso de fuente de 100 y 900 no funcionará con Roboto Condensed, y retroceder al peso de fuente más cercano posible.

¿Cómo puede confirmar que Roboto Condensed no está utilizando el peso de 300 fuentes? Parece estar funcionando bien conmigo (también lo estoy usando en algunos sitios) ... también funciona bien en este violín: http://jsfiddle.net/8k72a/1/

Por lo tanto, no es posible obtener Roboto Condensado con un peso de fuente de 100, por ejemplo.

Con tu pregunta actualizada, ¿por qué no usar este script en su lugar? Veo que has roto tus estilos CSS en varias líneas. Recuerda escapar de los saltos de línea en JS con una barra invertida / :

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);