Les polices Web influencent directement la rapidité à laquelle les visiteurs peuvent lire votre page. Elles ne sont souvent demandées par le navigateur qu’après l’analyse du HTML et du CSS. Si votre thème charge plusieurs familles, graisses, styles italiques et jeux de caractères complets, ces fichiers peuvent retarder l’affichage du texte ou provoquer un changement visuel lorsque la police finale remplace la police de secours.
Pour optimiser les polices WordPress, l’objectif n’est pas de retirer toute personnalité à votre site. Il consiste plutôt à ne charger que les fichiers réellement utiles, au bon moment, avec une solution de repli qui conserve une mise en page stable. Cette approche complète les autres bonnes pratiques présentées dans ce guide sur la vitesse d’un site WordPress.
Commencez par repérer ce que votre thème charge réellement
Avant de modifier quoi que ce soit, ouvrez une page importante de votre site dans les outils de développement du navigateur. Dans l’onglet réseau, filtrez les requêtes avec le terme « font » ou l’extension .woff2. Vérifiez notamment :
- le nombre de familles de polices téléchargées ;
- les graisses réellement demandées : 400, 500, 600, 700, etc. ;
- la présence de variantes italiques ;
- les fichiers qui sont chargés sur toutes les pages, même lorsqu’ils ne servent à rien ;
- la provenance des fichiers : votre domaine, le domaine d’un fournisseur ou une extension.
Il est fréquent de découvrir qu’un thème, un constructeur de pages ou une extension ajoute ses propres polices en plus de celles choisies dans les réglages du site. Si vous soupçonnez qu’une extension est responsable d’actifs inutiles, appliquez une méthode d’isolation progressive comme celle expliquée dans comment détecter les extensions WordPress qui ralentissent votre site.
Réduisez les familles et les variantes avant toute optimisation technique
La réduction la plus fiable est aussi la plus simple : utilisez moins de fichiers. Une police pour le texte courant et, au besoin, une autre pour les titres suffisent dans bien des thèmes. Chaque graisse ou style distinct peut représenter un fichier supplémentaire.
Évitez donc de déclarer une police en 300, 400, 500, 600, 700 et 800 si votre feuille de styles n’emploie réellement que 400 pour le texte et 700 pour les titres. Faites aussi attention aux styles italiques : ne les chargez que si votre contenu ou votre design les utilise de façon visible.
Les polices variables peuvent simplifier cette gestion lorsqu’elles couvrent les poids nécessaires dans un seul fichier. Cela ne signifie toutefois pas qu’elles sont automatiquement plus légères dans tous les cas. Comparez la taille réelle du fichier et les variantes dont votre site a besoin avant de remplacer plusieurs fichiers statiques.
Le guide Optimize WebFont loading and rendering de web.dev rappelle qu’une police complète avec toutes ses variantes et tous ses glyphes peut devenir très lourde. Il recommande de répartir les variantes et les sous-ensembles afin que le navigateur ne télécharge que ce qui est nécessaire.
Privilégiez WOFF2 et un sous-ensemble adapté à votre contenu
Pour les navigateurs actuels, servez vos fichiers en WOFF2. Ce format est conçu pour le Web et réduit habituellement le poids par rapport à des formats plus anciens. Il est préférable d’éviter d’ajouter plusieurs formats « au cas où » sans nécessité démontrée : vous alourdissez la maintenance et compliquez l’audit des ressources.
Un sous-ensemble de caractères est tout aussi important. Un site en français canadien n’a généralement pas besoin de télécharger tous les alphabets et symboles disponibles dans une police internationale. Assurez-vous toutefois que le sous-ensemble conserve les accents français, les apostrophes typographiques, les signes de ponctuation et tout caractère requis par vos langues de contenu.
Testez aussi vos pages réelles : menus, fiches produits, formulaires, extraits d’articles et contenus importés. Une police trop restreinte peut forcer l’affichage de certains caractères avec une autre police, ce qui nuit à la cohérence visuelle.
Héberger localement ou utiliser un fournisseur externe : choisissez avec méthode
Héberger les fichiers de police dans votre thème ou dans un répertoire d’actifs vous donne un contrôle direct sur les fichiers, leurs noms et leur politique de cache. C’est souvent une option claire lorsque vous avez déjà les fichiers avec les droits d’utilisation appropriés et que vous voulez limiter les dépendances externes.
Un fournisseur externe peut être justifié dans certains contextes, mais il ajoute une origine à évaluer. Si une police critique doit venir d’un autre domaine, le navigateur doit aussi établir cette connexion. Le préchargement et les indications de connexion peuvent aider dans des cas précis, mais ils ne corrigent pas un catalogue de polices trop lourd.
Pour un thème à blocs, WordPress permet de déclarer des familles système ou des polices Web dans theme.json, au moyen de settings.typography.fontFamilies et de la propriété fontFace. Consultez la documentation officielle sur la typographie dans theme.json pour vérifier la structure attendue et les descripteurs disponibles.
Dans un thème classique ou lorsque vous ajoutez une feuille CSS distincte, chargez-la avec le mécanisme WordPress prévu à cette fin. Le manuel WordPress sur l’inclusion des ressources recommande d’utiliser wp_enqueue_style() sur le crochet wp_enqueue_scripts, plutôt que d’insérer manuellement une balise link dans header.php.
Utilisez font-display pour éviter le texte invisible
La règle @font-face accepte la propriété font-display. Elle indique au navigateur comment afficher le texte pendant le téléchargement de la police. Sans stratégie explicite, vous risquez un texte invisible temporaire ou un remplacement tardif qui modifie la mise en page.
@font-face {
font-family: "MaPolice";
src: url("/wp-content/themes/mon-theme/assets/fonts/ma-police-latin.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: "MaPolice", system-ui, -apple-system, "Segoe UI", sans-serif;
}swap permet d’afficher rapidement la police de secours, puis de la remplacer lorsque la police Web est prête. C’est souvent un bon point de départ, mais il peut occasionner un léger décalage si les deux polices ont des métriques très différentes. optional favorise davantage la stabilité : dans certaines conditions, la police Web peut ne pas être utilisée lors du premier affichage. Le choix dépend de l’importance esthétique de la police et des résultats mesurés sur votre site.
La documentation Optimize Cumulative Layout Shift de web.dev indique que les polices Web peuvent produire des décalages de mise en page et recommande notamment une police de secours appropriée, ainsi que les descripteurs size-adjust, ascent-override, descent-override et line-gap-override pour rapprocher les métriques lorsque cela est nécessaire.
Préchargez seulement la police indispensable au premier écran
Le préchargement peut demander tôt au navigateur un fichier de police crucial, par exemple celui utilisé dans le grand titre visible dès l’arrivée sur la page. Il ne faut toutefois pas précharger toutes les polices. Chaque ressource déclarée prioritaire entre en concurrence avec les images, le CSS et les autres éléments essentiels.
<link rel="preload"
href="/wp-content/themes/mon-theme/assets/fonts/ma-police-latin.woff2"
as="font"
type="font/woff2"
crossorigin>La ressource préchargée doit correspondre exactement au fichier ensuite déclaré dans @font-face. Pour les polices, l’attribut crossorigin est important : la documentation web.dev sur le préchargement des actifs critiques précise qu’une police préchargée sans cet attribut peut être téléchargée deux fois. Elle recommande aussi d’utiliser le préchargement avec parcimonie et seulement pour les ressources réellement critiques.
Prévenez les décalages visuels avec une bonne police de secours
La police de secours fait partie de votre performance perçue. Choisissez une famille générique cohérente avec votre police principale : sans-serif pour une police sans empattement, serif pour une police à empattement. Évitez de laisser le navigateur choisir une valeur par défaut qui ne ressemble pas du tout à votre police finale.
Lorsque le décalage demeure visible, ajustez la police de secours avec les descripteurs de métriques, puis comparez l’affichage avant et après sur mobile comme sur ordinateur. Vérifiez particulièrement les titres qui passent sur deux lignes, les boutons et les éléments proches du haut de page.
Une courte liste de vérification avant de publier
- Conservez uniquement les familles, poids et styles réellement utilisés.
- Servez les fichiers nécessaires en WOFF2.
- Vérifiez que les sous-ensembles incluent les caractères français requis.
- Ajoutez une pile de polices de secours cohérente.
- Définissez
font-displayet observez son effet sur le texte et la stabilité visuelle. - Préchargez au maximum la police indispensable au contenu visible immédiatement, après l’avoir mesuré.
- Testez une page d’accueil, un article et une page de conversion avec le cache vidé.
Enfin, le choix initial du thème compte beaucoup : un thème qui impose de nombreuses polices et variantes vous laissera moins de marge. Avant un changement majeur, relisez comment bien choisir son thème WordPress afin d’évaluer aussi ses implications de performance et de maintenance.