Especificar el estilo y el grosor de las fuentes de Google

Estoy usando fuentes de Google en algunas de mis páginas y golpeo una pared cuando intento usar variaciones de una fuente. Ejemplo: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

Estoy importando tres caras, Normal, Negrita, ExtraNegrita a través de la etiqueta de enlace. La cara normal se muestra correctamente, pero no puedo entender cómo usar las variantes de la fuente en mi CSS

Intenté todo lo siguiente como atributos para la familia de fuentes, pero sin dados:

• 'Open Sans Bold'
• 'Open Sans 700'
• 'Open Sans Bold 700'
• 'Open Sans: Bold'

Los propios documentos de Google no ofrecen mucha ayuda. ¿Alguien tiene una idea de cómo debo escribir mis reglas CSS para mostrar estas variantes?

Usan CSS regular.

Simplemente use su familia de fuentes habitual como esta:

font-family: 'Open Sans', sans-serif;

Ahora decide qué "peso" debe tener la fuente agregando

para semi-negrita

font-weight:600;

para negrita (700)

font-weight:bold;

para más atrevido (800)

font-weight:800;

Así, es una prueba de respaldo, por lo que si la fuente de Google "falla", su fuente de respaldo Arial / Helvetica (Sans-serif) use el mismo peso que la fuente de Google.

Muy inteligente :-)

Tenga en cuenta que los diferentes pesos de fuente deben importarse específicamente a través de la URL de la etiqueta de enlace (parámetro de consulta familiar de la URL de fuente de Google) en el encabezado.

Por ejemplo, el siguiente enlace incluirá los pesos 400 y 700:

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

Aquí está el problema: no puede especificar pesos de fuente que no existen en el conjunto de fuentes de Google. Haga clic en el enlace VER MUESTRA debajo de la fuente, luego desplácese hacia abajo hasta la sección ESTILOS. Allí verá cada uno de los "estilos" disponibles para esa fuente en particular. Lamentablemente, Google no enumera los pesos de fuente CSS para cada estilo. Así es como los nombres se asignan a los números de peso de fuente CSS:

Thin            100     
Extra Light     200
Light           300
Regular         400
Medium          500
Semi-Bold       600
Bold            700
Black           900

Tenga en cuenta que muy pocas fuentes tienen los 9 pesos.

font-family:'Open Sans' , sans-serif;

Para luz: font-weight : 100; O font-weight : lighter;

Para normal: font-weight : 500; O font-weight : normal;

Para negrita: font-weight : 700; O font-weight : bold;

Para más atrevido: font-weight : 900; O font-weight : bolder;

puede utilizar el valor de peso especificado en las fuentes de Google.

body{
 font-family: 'Heebo', sans-serif;
 font-weight: 100;
}