En-tête de réponse CORS (Cross Cross-Origin Resource Sharing) manquant
Navigateurs:
- Firefox (3.5 et versions ultérieures)
- Internet Explorer (version 9 ou ultérieure)
- Chrome (37 ans et plus)
Présentation
Chrome, Firefox et les versions plus récentes d'Internet Explorer appliquent la norme Cross-Origin Resource Sharing et affichent donc uniquement les polices Web diffusées avec l'en-tête de réponse "Access-Control-Allow-Origin" approprié. Comme Google Fonts peut être affiché sur n'importe quel domaine, les polices sont diffusées avec l'en-tête de réponse suivant:
Access-Control-Allow-Origin:*
Cause potentielle
Certains proxys peuvent supprimer l'en-tête de la réponse, après quoi le navigateur n'affichera pas les polices.
Diagnostiquer
Avec Chrome, recherchez le message d'avertissement approprié dans la console DevTools.
Avec Firefox, vous pouvez utiliser les extensions Firebug ou Live HTTP Headers pour afficher les en-têtes de réponse permettant de confirmer la présence de l'en-tête de réponse CORS.
Links
Les polices Web ne s'affichent pas dans Firefox lorsque le plug-in NoScript est installé
Navigateurs : * Firefox (3.5+)
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.
La solution
Ouvrez les options NoScript, accédez à l'onglet "Intégrations", puis décochez la case "Forbid" (Interdit).
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 non compatible avec la police a été demandé.
La solution
Assurez-vous que l'URL est correctement mise en forme et que la casse est respectée dans le nom de la police (par exemple, Droid Serif non droïde ) Si les polices ne s'affichent pas, consultez le contenu de la feuille de style pour obtenir plus d'informations sur le problème. Copiez et collez l'URL dans votre navigateur et assurez-vous qu'aucun message d'erreur ne s'affiche. Par exemple, la requête d'une pondération non acceptée par Droid Serif affichera 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 titre
Navigateurs : * Tous
Présentation
Les polices sont plus épaisses lorsqu'elles sont utilisées dans un titre (h1, h2, etc.), même si leur police est normale (400).
Cause potentielle
Le texte est automatiquement mis en gras dans le navigateur.
La solution
Assurez-vous que l'épaisseur de police appropriée est spécifiée dans votre règle CSS lorsque vous appliquez une police à un en-tête:
h1 { font-family: Lobster, cursive; font-weight: 400; }