Dépannage

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.

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;
}