Solução de problemas

Cabeçalho de resposta Compartilhamento de recursos entre origens (CORS) ausente

Navegadores:

  • Firefox (3.5+)
  • Internet Explorer (9 ou mais)
  • Chrome (mais de 37)

Visão geral

O Chrome, o Firefox e as versões mais recentes do Internet Explorer impõem o padrão de compartilhamento de recursos entre origens e, portanto, renderizam somente fontes da Web exibidas com o cabeçalho de resposta "Access-Control-Allow-Origin" apropriado. Como o Google Fonts pode ser visualizado em qualquer domínio, as fontes são exibidas com o seguinte cabeçalho de resposta:

Access-Control-Allow-Origin:*

Possível causa

Alguns proxies podem remover o cabeçalho da resposta. Depois disso, o navegador não renderizará as fontes.

Diagnóstico

Com o Chrome, verifique a mensagem de aviso relevante no console de Ferramentas.

Com o Firefox, é possível usar as extensões Firebug ou Live Headers para visualizar os cabeçalhos de resposta e confirmar a presença do cabeçalho de resposta CORS.

As fontes da Web não são exibidas no Firefox quando o plug-in NoScript está instalado.

Navegadores: * Firefox (3.5+)

Visão geral

O Firefox não exibe fontes da Web quando o plug-in NoScript está instalado.

Possível causa

Por padrão, o plug-in NoScript desativa as regras @font-face.

Solução

Abra as Opções do NoScript, acesse a guia "Incorporações" e desmarque: Proibir @font-face

As fontes da Web não são exibidas

Navegadores: * Todos

Visão geral

As fontes da Web usadas não são exibidas.

Possível causa

Há um erro no URL da API ou um estilo não compatível com a fonte foi solicitado.

Solução

Verifique se o URL está formatado corretamente, se a capitalização é respeitada no nome da fonte (por exemplo, Droid Serif e não droid CRL), se a sintaxe para peso e estilos é respeitada, bem como a sintaxe para carregar várias famílias (consulte a documentação: Primeiros passos - Sintaxe). Quando as fontes não estão sendo exibidas, analisar o conteúdo da folha de estilo pode fornecer mais informações sobre o que está errado. Copie e cole o URL no navegador e verifique se nenhuma mensagem de erro é exibida. Por exemplo, a solicitação de um peso não compatível com o Droid Serif mostrará a seguinte mensagem de erro:

/* Droid Serif (style: normal, weight: 300) is not available */
/* However, style: normal, weight: normal is available */
/* However, style: italic, weight: normal is available */
/* However, style: normal, weight: bold is available */
/* However, style: italic, weight: bold is available */
/* Not supported. */

As fontes da Web são mais grossas quando usadas em um título.

Navegadores: * Todos

Visão geral

As fontes parecem mais grossas quando usadas em um título (h1, h2 etc.), mesmo que a fonte tenha um peso normal (400).

Possível causa

O navegador coloca o texto em negrito automaticamente.

Solução

Verifique se a ponderação correta da fonte está especificada na regra de CSS ao aplicar uma fonte a um cabeçalho:

h1 {
 font-family: Lobster, cursive;
 font-weight: 400;
}