Polices WordPress absentes chez les visiteurs : retrouver le bon chargement

Partir du texte que les visiteurs voient réellement

Le titre utilise la bonne police dans l’éditeur, mais un visiteur obtient une écriture différente. Le problème peut concerner toute la page, seulement le gras, quelques lettres accentuées ou les premières secondes du chargement. Le résultat recherché consiste à faire afficher la famille et les variantes prévues, avec un texte lisible pendant leur arrivée.

Une famille désigne un ensemble comme une police de texte et ses versions : normale, italique, légère ou grasse. Le navigateur peut remplacer une famille indisponible par une autre. Une ressemblance visuelle ne suffit donc pas à prouver que le fichier attendu a été reçu. À l’inverse, des différences de lissage entre appareils ne prouvent pas qu’une autre famille est utilisée.

Choisissez un passage précis, assez long pour contenir des accents, puis notez sa page, sa graisse et le navigateur concerné. Comparez la même adresse publique, à la même largeur, avec et sans connexion WordPress. Attendez la fin du chargement avant de conclure. Une capture de l’éditeur d’une autre page ne constitue pas un témoin.

Travaillez ensuite sur une copie lorsque vous devez changer un réglage partagé ou remplacer des fichiers. Conservez la famille précédente et une capture des valeurs de départ. Vous pourrez ainsi annuler la correction sans reconstruire toute la présentation du site.

Choisir le parcours selon le résultat du diagnostic

La première approche convient lorsque la bonne famille n’est pas choisie, lorsqu’une variante a été désactivée ou lorsqu’un fichier manque dans la bibliothèque. Elle demande un compte autorisé à gérer les polices et, pour les styles globaux, l’apparence du site. Un auteur pouvant modifier son article n’a pas forcément ces droits.

La deuxième approche concerne une famille bien sélectionnée dont le fichier ne parvient pas au visiteur. Elle commence dans le navigateur, sans terminal. Une correction d’adresse se réalise dans le réglage ou le CSS qui produit cette adresse ; un fichier réellement perdu peut se récupérer avec le gestionnaire de fichiers de l’hébergeur. L’intervention sur des règles de serveur nécessite l’accès correspondant.

La troisième approche est une option ciblée pour des polices Google existantes chargées à distance par un mécanisme compatible. Elle permet de conserver leur usage tout en servant les fichiers depuis le site. Elle n’est pas nécessaire si la bibliothèque native héberge déjà les fichiers, et ne répare pas une mauvaise famille choisie dans un bloc.

Avant toute installation, distinguez WordPress autohébergé et WordPress.com. Sur ce dernier, la disponibilité des polices personnalisées dépend de l’offre. En multisite, l’administration du réseau peut limiter extensions ou fonctions. L’absence d’un bouton n’autorise pas à copier un tutoriel prévu pour une autre version : relevez d’abord votre version et vos menus.

Identifier la famille demandée et la famille rendue

Dans Chrome, ouvrez la page publique puis faites un clic droit sur le texte concerné et choisissez Inspecter. Dans Elements, l’onglet Computed, ou Calculé, permet d’examiner les valeurs appliquées. La rubrique Rendered Fonts indique les polices effectivement employées pour les caractères de l’élément sélectionné. La propriété font-family décrit seulement une liste de familles souhaitées.

Relevez aussi font-weight et font-style. Un paragraphe normal correct avec un titre gras incorrect oriente vers une variante ou une règle différente. Plusieurs polices rendues sur le même passage peuvent correspondre à des caractères absents de la première. Sélectionnez directement le texte utile, plutôt qu’un grand conteneur mêlant menus et paragraphes.

Dans Styles, retrouvez la règle responsable et son fichier d’origine. Une règle barrée ne gagne pas la priorité. Une famille choisie dans le bloc peut expliquer pourquoi le style global n’agit pas. Les changements temporaires dans les outils du navigateur disparaissent au rechargement : ils servent à vérifier une hypothèse, puis la correction doit rejoindre sa source.

Notez la famille demandée, la famille rendue, la graisse et l’adresse de la page.
Comparez ce relevé sur une page qui fonctionne et une page qui échoue.
Si la famille demandée est déjà incorrecte, corrigez son affectation avant de chercher un fichier manquant.
Si elle est correcte mais remplacée, poursuivez vers la bibliothèque puis les requêtes réseau.

Réactiver ou importer seulement les fichiers nécessaires

Depuis WordPress 7.0, ouvrez Apparence → Polices, y compris avec un thème classique. Sur certaines versions antérieures avec éditeur de site, la gestion passe par Styles → Typographie → Gérer les polices. Ces deux accès reflètent des versions différentes ; installer une extension expérimentale pour retrouver un ancien écran n’est pas une étape de réparation.
Dans la bibliothèque, ouvrez la famille attendue. Vérifiez les variantes activées ; cochez celle réellement utilisée, puis cliquez sur Mettre à jour. Sur WordPress.com, une variante désactivée peut ainsi être réactivée sans supprimer toute la famille. Conservez l’état initial pour annuler l’essai en rétablissant les anciennes cases.
Si le fichier est absent, l’onglet de téléversement accepte notamment WOFF2, WOFF, TTF et OTF. Importez un fichier dont vous possédez les droits d’usage web. Pour une famille Google, l’onglet d’installation permet de sélectionner la famille et ses variantes ; WordPress télécharge et héberge ces fichiers sur le site.
La réussite de l’import confirme leur présence dans la bibliothèque, pas leur utilisation par tous les blocs. Vérifiez la variante installée puis poursuivez avec l’affectation. Ne supprimez pas une famille existante pour la réinstaller à l’aveugle : d’autres pages peuvent encore s’en servir.

Affecter la police au bon niveau de styles

Avec un thème de blocs, ouvrez Apparence → Éditeur → Styles → Typographie. Choisissez l’élément concerné, par exemple Texte ou Titres, puis la famille dans le réglage Police. Conservez les valeurs précédentes, enregistrez et examinez le site public. Si seuls les titres doivent changer, ne remplacez pas aussi la police du texte courant.
Pour une exception dans un article, ouvrez celui-ci et sélectionnez le bloc exact. Dans sa barre latérale Réglages, cherchez Typographie. Le menu à trois points de ce panneau permet d’afficher les contrôles disponibles, dont Police lorsque le bloc et le thème le proposent. Une valeur locale peut prendre le dessus sur un choix global. Rétablissez la valeur antérieure si l’essai affecte le mauvais élément.
Un thème classique peut proposer sa propre typographie dans Apparence → Personnaliser. Son panneau n’a pas un nom universel. La présence d’Apparence → Polices ne crée pas automatiquement un sélecteur global dans tous les thèmes classiques. Utilisez les contrôles documentés du thème ou le CSS existant identifié au diagnostic, sans changer de thème pour ce seul réglage.
Le résultat attendu est une famille demandée correcte sur l’élément choisi et une famille rendue correspondante. Si la demande reste différente, recherchez un bloc, un style de bloc ou une règle personnalisée plus précise. Si la demande est correcte mais le rendu ne suit pas, examinez le fichier chargé.

Relever la requête qui échoue dans le navigateur

Ouvrez les outils de développement avant de recharger la page. Dans Network, ou Réseau, choisissez le filtre Font pour voir les fichiers de polices demandés. Cliquez sur une ligne et relevez son adresse complète, son statut et son origine. Une famille peut charger plusieurs fichiers selon la graisse ou les caractères nécessaires.

Une réponse 404 signifie que l’adresse demandée ne trouve pas la ressource attendue. Une réponse 403 indique un refus, sans identifier à elle seule sa cause. Un statut 200 ne prouve pas que le contenu reçu est une police : une redirection de connexion ou une page d’erreur peut aboutir à du HTML. Consultez les en-têtes et les erreurs de la console.

Si aucune police n’apparaît, retirez temporairement le filtre pour vérifier la feuille de style qui devait la déclarer. Le navigateur peut utiliser une famille système, une version locale ou ne pas demander une variante inutile au texte présent. L’absence de ligne ne signifie donc pas automatiquement que le serveur refuse un fichier.

Vous pouvez cocher Disable cache pendant le diagnostic ; cette option concerne le cache du navigateur tant que les outils sont ouverts. Elle ne purge ni le cache WordPress ni un CDN. Décochez-la ensuite et notez les informations utiles, sans partager un export réseau complet susceptible de contenir des données de session.

Rétablir une adresse ou un fichier local manquant

Ce parcours convient après une migration ou lorsqu’une requête précise renvoie une erreur. Vous devez pouvoir modifier le réglage d’origine, ou accéder aux fichiers du site si le fichier manque réellement. Conservez le CSS, l’adresse et le fichier de départ avant de remplacer quoi que ce soit. Pour une police importée par la bibliothèque, commencez par son interface ; ne renommez pas arbitrairement ses fichiers générés.

Si une règle CSS personnalisée contient une ancienne adresse, retrouvez-la dans Apparence → Personnaliser → CSS additionnel pour un thème classique, ou dans le menu à trois points de Styles → CSS additionnel pour un thème de blocs. Modifiez seulement l’adresse de la déclaration concernée, après avoir vérifié le nouveau fichier. Une feuille générée par un outil se corrige dans cet outil plutôt que dans sa copie générée.

Si le fichier était géré manuellement et a disparu, utilisez le gestionnaire de fichiers de l’hébergement sur une copie. Ouvrez le dossier exact correspondant à l’URL relevée, puis remettez le fichier original autorisé depuis une sauvegarde. Respectez son nom et ses majuscules. N’envoyez pas une autre police sous le nom attendu pour faire disparaître une 404.

L’exemple ci-dessous illustre seulement une déclaration manuelle @font-face déjà identifiée, pour un fichier normal de graisse 400. Ce n’est pas un bloc à ajouter aux polices gérées par la bibliothèque ou un constructeur. Remplacez l’adresse fictive par celle du fichier HTTPS vérifié et gardez le nom de famille déjà employé dans votre CSS. Pour une simple ancienne URL, changez seulement src dans la déclaration existante ; conservez ses autres paramètres plutôt que de copier ceux de l’exemple.

font-family nomme la famille que les règles du site demandent ensuite ; src désigne le fichier. font-style et font-weight doivent correspondre au fichier réel : cet exemple ne décrit ni un italique ni une police variable. font-display: swap autorise un remplacement du secours pendant le chargement et peut produire un changement visuel ; gardez votre stratégie existante si elle est voulue. Aucune règle générale sur body n’est nécessaire pour réparer une adresse.

Relevez l’URL défaillante et la source qui la produit.
Corrigez l’adresse ou restaurez le seul fichier confirmé manquant.
Rechargez la page et vérifiez la réponse, puis la famille rendue.
Si le résultat se dégrade, rétablissez le réglage ou le fichier conservé ; évitez toute restauration globale du site pour cet essai.

@font-face {
  font-family: "PoliceDuSite";
  src: url("https://exemple.invalid/wp-content/uploads/polices/police-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

Traiter le blocage confirmé sans ouvrir toutes les protections

Une page en HTTPS qui appelle une police en HTTP peut voir ce chargement bloqué. Corrigez l’adresse dans sa source seulement après avoir vérifié que le même fichier existe réellement en HTTPS. Autoriser le contenu non sécurisé dans votre navigateur ne réparerait pas le site pour les visiteurs.

Un autre domaine, un sous-domaine ou un port différent constitue une autre origine. Une erreur CORS indique que le navigateur ne reçoit pas l’autorisation adaptée pour cette ressource distante. Ouvrir son URL directement dans un onglet n’est pas un test suffisant : le chargement depuis la page doit réussir. Ne collez pas une règle de serveur universelle à partir du seul mot CORS.

Si vous détenez le fichier et ses droits, une voie réalisable sans terminal consiste à l’importer dans la bibliothèque du site, puis à l’affecter comme indiqué plus haut. Vérifiez ensuite que la requête part vers cette nouvelle source et que l’ancienne règle ne continue pas de gagner. Revenez à la famille précédente si ce remplacement ne convient pas.

Si un CDN sert volontairement les polices, transmettez son URL, l’origine de la page et le message exact à la personne qui gère sa configuration. Une politique CSP peut également refuser un domaine ; l’erreur nomme alors la directive concernée. La correction doit porter sur cette source autorisée. Ne désactivez pas toute la politique, le pare-feu ou la protection des fichiers pour contourner le symptôme.

Option ciblée : héberger des polices Google déjà utilisées

Local Google Fonts, par EverPress, convient à certaines polices Google déjà appelées par le site via une feuille enregistrée avec wp_enqueue_style. Il ne remplace pas les imports CSS avec @import et ne choisit pas votre typographie. La fiche du répertoire consultée pour la version 0.25.0 indique WordPress 4.6 et PHP 7.4 minimum, avec un test déclaré jusqu’à WordPress 7.1.4. Ces indications ne remplacent pas un essai sur votre copie.
L’installation se fait depuis Extensions → Ajouter une extension, en recherchant le nom exact et l’auteur. Ce choix reste facultatif : utilisez d’abord la bibliothèque native si elle répond au besoin. Le serveur doit pouvoir récupérer les fichiers distants. Une installation bloquée ne se résout pas en désactivant aveuglément ses protections réseau.
Conservez les réglages initiaux. Après activation, visitez les pages qui emploient les familles pour permettre leur découverte, puis ouvrez Réglages → Google Fonts. Pour le jeu voulu, le bouton Host locally lance l’hébergement local ; une traduction peut modifier son libellé. Vérifiez les variantes et les sous-ensembles de caractères. La liste distingue les fichiers locaux des sources distantes.
Contrôlez ensuite dans Réseau le domaine des fichiers et leur utilisation effective. Un chargement partiel n’est pas une réussite complète. Si l’essai échoue, désactivez cette seule extension nouvellement ajoutée, puis actualisez les caches concernés et vérifiez le retour au comportement initial. Elle ne restaure pas une police propriétaire perdue et ne garantit aucune conformité juridique à elle seule.

Vérifier le gras, l’italique et les caractères de vos langues

Une famille peut être correctement chargée sans couvrir tous les usages du site. Un fichier normal ne fournit pas nécessairement un véritable italique ou une graisse forte. Un navigateur peut produire une apparence de remplacement ; cela ne prouve pas que la variante prévue a été installée. Reprenez la graisse et le style relevés sur l’élément, puis comparez-les aux variantes actives.

Pour une police variable, un seul fichier peut couvrir plusieurs graisses, selon sa plage déclarée. Ne lui attribuez pas arbitrairement toutes les valeurs possibles. La déclaration de police et le fichier doivent décrire les capacités réelles du même produit. Si ces données sont gérées par un thème ou un constructeur, utilisez son réglage d’import plutôt qu’une seconde déclaration concurrente.

Préparez un petit passage avec les caractères réellement publiés : accents, ligatures, signes monétaires et alphabet de la langue concernée. Une page française et une page dans un autre alphabet peuvent demander des sous-ensembles différents. Contrôlez la famille rendue sur les caractères problématiques, pas seulement sur une lettre latine ordinaire.

Installez ou activez les seuls fichiers nécessaires, puis refaites ce contrôle. Le retour arrière consiste à rétablir les variantes et le choix de police précédents. Ne téléchargez pas systématiquement toutes les graisses et toutes les langues : cela augmente les fichiers à entretenir sans résoudre une affectation incorrecte.

Séparer cache, consentement et délai de remplacement

Après une correction, un ancien CSS ou une ancienne page mise en cache peut continuer à demander la mauvaise URL. Purgez d’abord la page ou les fichiers concernés avec l’outil déjà utilisé par le site, puis retestez déconnecté. Si un CDN intervient, son cache constitue une couche distincte. Une purge n’a pas de retour arrière : conservez les réglages pour pouvoir les rétablir, puis laissez le cache se reconstruire.

Si la police apparaît après une décision dans le bandeau de consentement, comparez les requêtes avant et après cette décision. Cela indique un lien avec les règles de chargement, sans démontrer qu’il faut autoriser toutes les ressources externes. Testez les deux états prévus, puis corrigez le classement ou privilégiez une source locale autorisée. Le texte doit rester utilisable dans chaque état.

Un changement bref de police pendant le chargement peut être normal. La propriété font-display influence la période pendant laquelle le navigateur attend et remplace une police de secours. Une stratégie optional peut conserver ce secours sur un chargement donné ; swap peut provoquer un remplacement visible. Modifier ce comportement ne recrée pas un fichier absent.

Si la famille attendue finit toujours par apparaître, traitez séparément la stabilité visuelle et la vitesse. Si elle n’arrive jamais, revenez à la requête et à la famille réellement rendue. N’ajoutez pas des préchargements de fichiers au hasard pour masquer une erreur de source.

Valider la correction et conserver une preuve exploitable

La vérification finale doit dépasser l’aperçu administrateur. Choisissez la page initiale, une autre page du même modèle et une page utilisant une graisse différente. Comparez une visite nouvelle et une visite répétée, puis un téléphone réel si le problème y était observé. Gardez une largeur et un texte identiques pour apprécier les différences.

Un résultat satisfaisant associe un texte lisible, la bonne famille rendue sur les caractères visés et des requêtes cohérentes avec la source choisie. L’absence d’erreur rouge ne suffit pas : le navigateur peut afficher correctement une police de secours alors que votre choix éditorial n’est pas appliqué. Vérifiez aussi les retours à la ligne des titres et les boutons après le changement.

Consignez la famille, les variantes, leur source et le réglage qui les affecte. Pour une escalade technique, transmettez la page publique, l’URL du fichier, son statut, le message exact et les étapes déjà tentées. Écartez cookies, données privées et export complet de session.

La prévention consiste à conserver les fichiers autorisés et leurs licences, à documenter les choix typographiques et à contrôler ces mêmes pages après une migration ou un changement de thème. Vous disposerez d’un témoin concret pour repérer une régression, sans confondre une nouvelle présentation volontaire avec une panne de chargement.

Notre méthode éditoriale