Solução de problemas

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

Navegadores:

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

Visão geral

O Chrome, o Firefox e as versões mais recentes do Internet Explorer aplicam a política Cross-Origin padrão de compartilhamento de recursos e, assim, renderizar apenas as fontes da Web exibidas com o cabeçalho de resposta “Access-Control-Allow-Origin” apropriado. Como o Google Fonts pode ser visualizadas em qualquer domínio, as fontes serão exibidas com a seguinte resposta cabeçalho:

Access-Control-Allow-Origin:*

Possível causa

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

Gerando o diagnóstico

Com o Chrome, verifique se há uma mensagem de aviso na seção Console do DevTools.

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

As fontes da web não aparecem 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 de NoScript, vá para a guia Embeddings e desmarque: Proibir @nome-da-fonte

As fontes da Web não estão aparecendo

Navegadores: * Todas

Visão geral

As fontes da Web usadas não estão aparecendo.

Possível causa

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

Solução

Verifique se o URL está formatado corretamente, se a capitalização é respeitada no campo nome da fonte (por exemplo, Droid Serif, não droid serif), a sintaxe para peso e estilos é respeitado, bem como a sintaxe para carregar várias famílias (consulte a documentação: Introdução: sintaxe. Quando as fontes não estão aparecendo, olhar para o conteúdo da folha de estilo pode dar 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 peso não compatível com Serif do Droid será exibida. esta 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 parecem mais grossas quando usadas em um título

Navegadores: * Todas

Visão geral

As fontes parecem mais grossas quando usadas em um cabeçalho (h1, h2 etc.), mesmo que a fonte é um peso normal (400).

Possível causa

O navegador deixou o texto em negrito automaticamente.

Solução

Verifique se a espessura de fonte correta foi especificada na regra CSS ao aplicar uma fonte a um cabeçalho:

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