Que faire face à l’erreur ‘Font not loading’ sur WordPress en 2026 ? Guide complet

Que faire face à l'erreur 'Font not loading' sur WordPress en 2026 ? Que faire face à l'erreur 'Font not loading' sur WordPress en 2026 ? image
Rate this post

Comprendre l’erreur ‘Font not loading’ sur WordPress

L’erreur ‘Font not loading’ est un problème fréquent qui peut dégrader l’apparence et les performances de votre site WordPress. En 2026, avec l’évolution des navigateurs et des normes web, les causes et les solutions ont légèrement évolué. Cet article vous explique pas à pas comment diagnostiquer et corriger cette erreur.

Pourquoi vos polices ne se chargent-elles pas ?

Causes courantes en 2026

Plusieurs facteurs peuvent empêcher le chargement des polices :

  • Problèmes de serveur CDN : Les polices hébergées sur un CDN peuvent être bloquées si le CDN est mal configuré ou si le certificat SSL expire.
  • Erreurs de syntaxe dans le fichier functions.php : Une faute de frappe dans l’appel de police peut tout bloquer.
  • Conflits avec des plugins de performance : Certains plugins de cache ou d’optimisation CSS peuvent supprimer les appels de polices.
  • Restrictions CORS : Les navigateurs modernes bloquent les polices provenant de domaines non autorisés.
  • Mise à jour de WordPress ou du thème : Une mise à jour peut modifier les chemins d’accès aux polices.

Diagnostic rapide de l’erreur ‘Font not loading’

Utiliser les outils de développement du navigateur

Ouvrez la console de votre navigateur (F12) et vérifiez l’onglet Console ou Réseau. Recherchez les messages d’erreur liés aux polices (404, 403, CORS). Notez les URLs des polices qui échouent.

Vérifier les fichiers de police

Assurez-vous que les fichiers de police (WOFF2, WOFF, TTF) sont présents dans le répertoire de votre thème ou plugin. Si vous utilisez Google Fonts, vérifiez que l’URL est correcte.

Solutions pour corriger l’erreur ‘Font not loading’

1. Réinitialiser le cache et les CDN

Videz le cache de votre site WordPress, celui de votre plugin de cache (comme WP Rocket ou W3 Total Cache), et le cache de votre navigateur. Si vous utilisez un CDN, purgez son cache également.

2. Corriger les erreurs dans functions.php

Ouvrez le fichier functions.php de votre thème enfant et vérifiez la fonction d’appel de police. Exemple correct avec WordPress 6.x :

function ajouter_polices_personnalisees() {
    wp_enqueue_style( 'ma-police', get_template_directory_uri() . '/fonts/mapolice.woff2', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'ajouter_polices_personnalisees' );

3. Désactiver les plugins suspects

Désactivez temporairement tous vos plugins, surtout ceux liés à la performance, à la sécurité ou à la typographie. Si l’erreur disparaît, réactivez-les un par un pour identifier le coupable.

4. Mettre à jour les polices Google

Si vous utilisez Google Fonts, assurez-vous d’utiliser la dernière version. En 2026, Google Fonts utilise principalement WOFF2. Utilisez un plugin comme « Google Fonts for WordPress » ou ajoutez le code suivant dans votre thème :

wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );

5. Vérifier les en-têtes CORS

Pour les polices auto-hébergées, ajoutez la règle suivante dans votre fichier .htaccess (Apache) :

<FilesMatch ".(woff2?|ttf|otf|eot)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Pour Nginx, ajoutez dans la configuration :

location ~* .(woff2?|ttf|otf|eot)$ {
    add_header Access-Control-Allow-Origin *;
}

6. Utiliser un thème compatible

Certains thèmes obsolètes ne gèrent pas correctement les polices modernes. Mettez à jour votre thème ou passez à un thème réputé comme Astra, GeneratePress ou Kadence.

Prévenir l’erreur ‘Font not loading’ à l’avenir

Bonnes pratiques pour les polices sur WordPress

  • Utilisez des formats modernes : WOFF2 est le plus performant et le mieux supporté en 2026.
  • Hébergez localement vos polices : Évitez les dépendances externes (Google Fonts, Typekit) qui peuvent être bloquées.
  • Optimisez le chargement : Utilisez le chargement asynchrone avec font-display: swap pour éviter les blocages.
  • Testez après chaque mise à jour : WordPress, thèmes et plugins peuvent modifier les chemins.
  • Utilisez un thème enfant : Pour personnaliser les polices sans perdre les modifications lors des mises à jour.

Outils pour diagnostiquer les problèmes de polices

Plugins recommandés

  • Health Check & Troubleshooting : Permet de désactiver les plugins sans affecter les visiteurs.
  • Query Monitor : Affiche les erreurs PHP et les appels de polices.
  • Asset CleanUp : Pour gérer les chargements de polices et autres ressources.

Services en ligne

  • Google Fonts Checker : Vérifie si vos polices Google sont correctement chargées.
  • WebPageTest : Analyse le chargement des polices et suggère des optimisations.

Que faire si l’erreur persiste ?

Si après toutes ces étapes l’erreur ‘Font not loading’ continue, il est possible que votre hébergeur bloque certains types de fichiers. Contactez le support technique en leur fournissant les URLs des polices et les messages d’erreur de la console. Vous pouvez également demander de l’aide sur les forums WordPress avec un rapport de santé complet.

En 2026, la plupart des problèmes de polices sont liés à des conflits de plugins ou à des configurations serveur obsolètes. En suivant ce guide, vous devriez pouvoir résoudre l’erreur rapidement et offrir une expérience visuelle optimale à vos visiteurs.

Résumé des actions à entreprendre

  1. Vider tous les caches (WordPress, navigateur, CDN).
  2. Vérifier les fichiers de police et les chemins.
  3. Désactiver les plugins de performance un par un.
  4. Corriger les en-têtes CORS si nécessaire.
  5. Mettre à jour le thème et les plugins.
  6. Utiliser des polices auto-hébergées en WOFF2.

N’oubliez pas de tester votre site après chaque modification. Une police qui ne charge pas peut sembler anodin, mais elle impacte l’image de marque et le taux de rebond. Prenez le temps de bien diagnostiquer et corrigez l’erreur ‘Font not loading’ sur WordPress dès aujourd’hui.

Photo by FotografieLink on Pixabay

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *