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.
Links
- https://developer.mozilla.org/pt-BR/HTTP_access_control
- https://www.w3.org/TR/cors/ (link em inglês)
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; }