En-tête de réponse CORS (Cross-Origin Resource Sharing) manquant
Navigateurs:
- Firefox (version 3.5 ou ultérieure)
- Internet Explorer (version 9 ou ultérieure)
- Chrome (version 37 ou ultérieure)
Présentation
Chrome, Firefox et les versions plus récentes d'Internet Explorer appliquent l'authentification multi-origine de partage des ressources, afin d'afficher uniquement les polices Web diffusées avec l'en-tête de réponse "Access-Control-Allow-Origin" approprié. Comme Google Fonts peut peuvent être affichées sur n'importe quel domaine, les polices sont diffusées avec la réponse suivante : en-tête:
Access-Control-Allow-Origin:*
Cause potentielle
Certains proxys peuvent supprimer l'en-tête de la réponse, après quoi le navigateur n'effectue pas le rendu des polices.
Diagnostic…
Avec Chrome, recherchez le message d'avertissement approprié dans le Console DevTools
Avec Firefox, vous pouvez utiliser les extensions Firebug ou Live HTTP Headers pour afficher les en-têtes de réponse pour confirmer la présence de l'en-tête de réponse CORS.
Liens
Les polices Web ne s'affichent pas dans Firefox lorsque le plug-in NoScript est installé
Navigateurs: * Firefox (version 3.5 ou ultérieure)
Présentation
Firefox n'affiche pas les polices Web lorsque le plug-in NoScript est installé.
Cause potentielle
Par défaut, le plug-in NoScript désactive les règles @font-face.
Solution
Ouvrez les options NoScript, accédez à l'onglet "Représentations vectorielles continues" et décochez l'option "Interdire". @font-face
Les polices Web ne s'affichent pas
Navigateurs: * Tous
Présentation
Les polices Web utilisées ne s'affichent pas.
Cause potentielle
L'URL de l'API comporte une erreur ou un style qui n'est pas compatible avec la police a été demandée.
Solution
Assurez-vous que l'URL est au bon format et que la casse est respectée dans les le nom de la police (par exemple, Droid Serif, pas droid serif), que la syntaxe pour les pondérations et les styles sont respectés, de même que la syntaxe permettant de charger plusieurs familles (voir la Premiers pas – Syntaxe. Lorsque les polices ne s'affichent pas, l'examen du contenu de la feuille de style peut plus d'informations sur ce qui ne va pas. Copiez et collez l'URL dans votre et assurez-vous qu'aucun message d'erreur ne s'affiche. Par exemple, si vous demandez un poids non pris en charge par Droid Serif s'affiche le message d'erreur suivant:
/* 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. */
Les polices Web sont plus épaisses lorsqu'elles sont utilisées dans un en-tête
Navigateurs: * Tous
Présentation
Les polices sont plus épaisses lorsqu'elles sont utilisées dans un titre (h1, h2, etc.), même si la police correspond à une pondération normale (400).
Cause potentielle
Le navigateur a mis le texte automatiquement en gras.
Solution
Assurez-vous que l'épaisseur de police appropriée est spécifiée dans votre règle CSS lorsque appliquer une police à un en-tête:
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}