Especificando estilo e peso para fontes do Google

Estou usando as fontes do Google em algumas das minhas páginas e bati em uma parede ao tentar usar variações de uma fonte. Exemplo: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

Estou importando três faces, Normal, Negrito, ExtraBold por meio da tag do link. A face normal é exibida corretamente, mas não consigo descobrir como usar as variantes da fonte em meu CSS

Tentei todos os seguintes como atributos para a família de fontes, mas sem dados:

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

Os próprios documentos do Google não oferecem muita ajuda. Alguém tem uma ideia de como devo escrever minhas regras CSS para exibir essas variantes?

Eles usam CSS regular.

Basta usar sua família de fontes regular desta forma:

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

Agora você decide qual "peso" a fonte deve ter adicionando

para semi-negrito

font-weight:600;

para negrito (700)

font-weight:bold;

para negrito extra (800)

font-weight:800;

Assim, é à prova de fallback, portanto, se a fonte google "falhar", sua fonte de backup Arial / Helvetica (Sans-serif) use o mesmo peso da fonte google.

Muito esperto :-)

Observe que os diferentes pesos de fonte devem ser importados especificamente por meio do URL da tag do link (parâmetro de consulta da família do URL da fonte do Google) no cabeçalho.

Por exemplo, o link a seguir incluirá os pesos 400 e 700:

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

Aqui está o problema: você não pode especificar espessuras de fonte que não existam no conjunto de fontes do Google. Clique no link VER AMOSTRA abaixo da fonte e role para baixo até a seção ESTILOS. Lá você verá cada um dos "estilos" disponíveis para aquela fonte específica. Infelizmente, o Google não lista os pesos das fontes CSS para cada estilo. Veja como os nomes são mapeados para números de peso de fonte CSS:

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

Observe que muito poucas fontes vêm em todos os 9 pesos.

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

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

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

Para negrito: font-weight : 700; Ou font-weight : bold;

Para mais ousado: font-weight : 900; Ou font-weight : bolder;

você pode usar o valor de peso especificado no Google Fonts.

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