Font-display swap WordPress

Sommaire de l'article

font-display swap WordPress : guide complet pour optimiser le chargement des polices

Introduction

Le chargement des polices web est un aspect crucial du design, des performances et de l’expérience utilisateur sur un site WordPress. L’optimisation des polices peut avoir un impact significatif sur la vitesse de chargement, la lisibilité du contenu et la qualité perçue du site par les visiteurs comme par les moteurs de recherche.

Dans cet article, nous allons explorer en détail le concept de font-display: swap dans WordPress, expliquer son fonctionnement réel, corriger quelques idées reçues et présenter des méthodes concrètes pour l’implémenter proprement dans un thème ou via des extensions. L’objectif est que votre texte reste visible pendant le chargement des polices, sans sacrifier la cohérence visuelle de votre identité graphique.

Avant de plonger dans les aspects techniques, il est important de comprendre pourquoi l’optimisation des polices est essentielle. Les polices web jouent un rôle clé dans la présentation du contenu, la hiérarchie de l’information et l’accessibilité. Cependant, si elles sont mal chargées (texte invisible, blocage trop long, fichiers trop lourds), elles peuvent ralentir l’affichage de la page et nuire fortement à l’expérience utilisateur.

C’est précisément ici qu’intervient le descripteur CSS font-display, utilisé dans les règles @font-face. Il permet de contrôler le comportement d’affichage d’une police web pendant son chargement. Parmi les différentes valeurs possibles, la valeur swap est aujourd’hui largement recommandée pour garantir un texte immédiatement visible tout en conservant votre police personnalisée dès qu’elle est prête.

Concepts clés autour de font-display

Qu’est-ce que font-display ?

font-display est un descripteur CSS de la règle @font-face. Concrètement, il ne s’utilise pas sur un sélecteur classique comme body ou h1, mais à l’intérieur de la déclaration de la police :

@font-face { font-family: 'MaPolicePerso'; src: url('mapolice.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap;
}

Ce descripteur détermine comment la police doit être affichée en fonction de son état de chargement. Il influence notamment :

la durée pendant laquelle le texte peut rester invisible,
le moment où une police de remplacement (fallback) est utilisée,
le comportement de remplacement de la police de secours par la police finale.

Les différentes valeurs de font-display

La propriété font-display peut prendre plusieurs valeurs normalisées, chacune ayant un impact différent sur le rendu du texte :

auto : c’est le comportement par défaut. Le navigateur décide seul, en fonction de sa propre logique, de la durée éventuelle d’invisibilité du texte et du recours à une police de secours.
block : le texte utilisant cette police peut rester invisible pendant une courte période (généralement jusqu’à quelques secondes) le temps que la police soit chargée. C’est ce mode qui est historiquement associé au FOIT (Flash of Invisible Text), où le texte ne s’affiche pas tant que la police n’est pas disponible.
swap : le navigateur affiche immédiatement une police de remplacement déjà disponible sur le système (ex. sans-serif, serif) et remplace ensuite cette police de secours par la police web une fois qu’elle est chargée. Ce comportement est associé à un FOUT (Flash of Unstyled Text ou Flash of Unstyled Font), c’est-à-dire un léger changement visuel au moment où la police personnalisée est appliquée.
fallback : le navigateur peut afficher brièvement du texte invisible, puis basculer sur une police de secours si la police personnalisée met trop de temps à se charger. Si finalement la police web arrive assez rapidement, elle peut être utilisée, sinon la police de secours restera affichée.
optional : la période de texte invisible est extrêmement courte. Le navigateur n’utilise la police web que si son chargement ne dégrade pas les performances. Sur des connexions lentes, il peut décider de ne jamais charger la police externe et de rester sur la police système.

Pourquoi utiliser font-display: swap ?

L’utilisation de font-display: swap est particulièrement recommandée pour le contenu textuel principal (paragraphes, titres, navigation), car elle privilégie l’accès à l’information. Concrètement, ce mode présente plusieurs avantages :

Texte immédiatement visible : au lieu d’avoir un bloc de texte invisible pendant le chargement de la police (FOIT), l’utilisateur voit tout de suite du texte avec une police de secours proche de la police finale. Cela améliore la perception de la vitesse de chargement et réduit la frustration.
Réduction du FOIT, remplacement par un FOUT maîtrisé : la valeur swap évite l’invisibilité du texte mais entraîne un léger « flash » lorsque la police personnalisée se substitue à la police de secours. Ce saut visuel est généralement très bref et largement acceptable au regard du gain d’accessibilité.
Bon compromis performance / UX : dans la majorité des cas, swap est un excellent compromis entre les besoins de performance (éviter de bloquer le rendu) et les exigences de design. D’autres valeurs peuvent être pertinentes dans des cas spécifiques (polices d’icônes, polices très lourdes, connexions très lentes), mais swap reste la recommandation par défaut dans la plupart des tutoriels et outils d’optimisation.

Limites et cas particuliers

Même si font-display: swap est souvent présenté comme la solution idéale, il est important de connaître ses limites :

un changement de police visible se produit lorsque la police personnalisée est enfin chargée : si la différence entre la police système et la police finale est importante, le reflow (changement de largeur des lignes, sauts de ligne différents) peut être plus perceptible ;
pour certaines interfaces très sensibles au pixel près (boutons très étroits, éléments d’interface très alignés), un reflow trop important peut légèrement décaler la mise en page ;
pour les polices d’icônes, swap n’est pas toujours idéal : afficher une police de texte en remplacement peut produire des symboles incompréhensibles. Dans ce cas, block ou d’autres stratégies (sprites SVG, icônes inline) peuvent être préférables.

font-display: swap et WordPress

Où se place réellement font-display dans WordPress ?

Une confusion fréquente consiste à croire que l’on peut simplement écrire font-display: swap; dans une règle CSS appliquée à body, h1 ou tout autre sélecteur. En réalité, ce descripteur s’utilise uniquement à l’intérieur des règles @font-face.

Dans un site WordPress, ces règles @font-face peuvent provenir :

du thème ou du thème enfant (via un fichier style.css ou un fichier CSS dédié aux polices, comme fonts.css),
d’un constructeur de pages ou d’un plugin de typographie qui génère ses propres feuilles de style,
de Google Fonts, chargées via une URL externe ou générées par un plugin.

Pour que font-display: swap soit pris en compte, il faut donc :

modifier ou ajouter les règles @font-face et y intégrer font-display: swap;,
ou utiliser un plugin qui réécrit automatiquement les URL ou le CSS des Google Fonts pour y injecter ce descripteur.

Avantages de font-display: swap pour un site WordPress

Sur un site WordPress, font-display: swap contribue directement :

à une meilleure expérience utilisateur mobile, où les connexions sont parfois lentes et les bloqueurs de contenu fréquents ;
à des indicateurs de performances Core Web Vitals plus favorables, notamment pour le Largest Contentful Paint et la visibilité du texte dès le premier rendu ;
à une réduction des avertissements dans certains outils d’audit (par exemple, les recommandations qui demandent de « s’assurer que le texte reste visible pendant le chargement des polices web ») ;
à une meilleure perception de la rapidité du site, ce qui peut influencer positivement le taux de rebond et le temps passé sur les pages.

Comment implémenter font-display: swap dans WordPress

1. Via un thème enfant WordPress

La méthode la plus propre et la plus pérenne consiste à utiliser un thème enfant. Vous pouvez ainsi intégrer vos propres fichiers de polices et contrôler précisément les règles @font-face.

Étape 1 : préparer les fichiers de polices

Placez vos fichiers de polices (formats recommandés : .woff2 en priorité, éventuellement .woff) dans un répertoire dédié, par exemple :

/wp-content/themes/mon-theme-enfant/assets/fonts/

Étape 2 : créer un fichier CSS pour les polices

Créez un fichier fonts.css dans le thème enfant, dans lequel vous allez déclarer vos polices avec @font-face et font-display: swap :

@font-face { font-family: 'MaPoliceTexte'; src: url('assets/fonts/mapolice-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap;
} @font-face { font-family: 'MaPoliceTitre'; src: url('assets/fonts/mapolice-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap;
}

Étape 3 : enregistrer le fichier dans functions.php

Dans le fichier functions.php du thème enfant, enregistrez le fichier fonts.css afin qu’il soit chargé sur le front :

get( 'Version' ) );
}

Étape 4 : appliquer les polices dans le CSS

Enfin, dans votre style.css du thème enfant, appliquez les polices aux éléments souhaités :

body { font-family: 'MaPoliceTexte', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
} h1, h2, h3, h4, h5, h6 { font-family: 'MaPoliceTitre', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

2. Ajouter font-display: swap à Google Fonts dans WordPress

Si votre site WordPress utilise Google Fonts, deux cas de figure principaux se présentent :

les Google Fonts sont intégrées directement par le thème (ou un constructeur de pages) via une URL,
elles sont ajoutées via un plugin de typographie ou de performance.

Méthode avec un plugin dédié

Il existe des extensions WordPress spécialement conçues pour ajouter automatiquement font-display: swap aux Google Fonts. Ces plugins scannent les URLs de polices et ajoutent le paramètre ou le CSS nécessaire pour activer le comportement swap. Certains outils d’optimisation de performances ou de cache proposent également une option « toujours afficher le texte pendant le chargement des polices » ou équivalent.

Les avantages de cette approche sont :

aucune modification manuelle du thème n’est nécessaire ;
la configuration est souvent rapide (installation, activation, quelques options) ;
compatible avec de nombreux thèmes et constructeurs de pages populaires.

Méthode manuelle via un filtre ou en surchargeant l’URL

Si vous préférez une approche plus technique et maîtrisée, vous pouvez filtrer les URLs de Google Fonts générées par votre thème ou votre plugin. L’idée est d’ajouter un paramètre pour activer display=swap ou d’injecter une règle @font-face personnalisée.

Exemple de principe (simplifié) dans functions.php :


Le code exact dépend de la façon dont le thème charge les Google Fonts, mais le principe est de s’assurer que l’URL injectée dans la balise  inclut le paramètre souhaité.
 3. Utiliser un plugin de CSS personnalisé
Si vous ne souhaitez pas créer de thème enfant, vous pouvez recourir à un plugin de type « CSS personnalisé » pour ajouter des règles @font-face. Cependant, attention : tous ces plugins ne permettent pas d’optimiser également la livraison des fichiers de polices (hébergement, format, compression).
La démarche consiste à :
 héberger les fichiers de polices sur votre serveur (ou utiliser un CDN fiable),
 ajouter les règles @font-face avec font-display: swap; via l’interface du plugin,
 appliquer ensuite les polices via des règles CSS classiques.
 4. Intégration avec WooCommerce et autres plugins
WooCommerce et d’autres plugins spécifiques (constructeurs de pages, plugins de formulaires, plugins de portfolio) peuvent ajouter leurs propres feuilles de style et parfois leurs propres polices. Dans ce cas :
 certains plugins proposent une option explicite pour choisir les polices et parfois l’option font-display ;
 d’autres exigent une personnalisation via un thème enfant ou un plugin de performances qui réécrit les ressources de polices ;
 si aucune option n’est proposée, vous pouvez toujours surcharger le CSS via un fichier ajouté dans le thème enfant.

Il est important de vérifier, avec les outils de développement du navigateur, quelles polices sont réellement chargées et d’où elles proviennent (thème, plugin de page builder, extension de typographie, etc.) afin d’appliquer font-display: swap à toutes les polices pertinentes.
 Bonnes pratiques d’optimisation autour de font-display: swap
 Réduire le poids et le nombre de polices
Utiliser font-display: swap ne dispense pas d’optimiser le nombre et le poids des fichiers de polices. Pour de bonnes performances WordPress :
 limitez-vous aux poids de police réellement nécessaires (par exemple 400 et 700, plutôt que toute la plage 100 à 900),
 supprimez les variantes inutilisées (italiques ou ultra-gras non employés sur le site),
 privilégiez le format WOFF2, plus performant, et servez WOFF uniquement en secours si nécessaire,
 évitez de charger une police différente pour chaque petit élément : créez un système typographique cohérent avec un nombre limité de familles.
 Mettre en cache les polices web
Pour éviter de recharger la même police à chaque visite, configurez un cache navigateur adapté pour les fichiers de polices :
 via votre fichier .htaccess (si vous utilisez Apache),
 via les réglages de votre serveur (Nginx, LiteSpeed),
 ou via un plugin de cache complet qui gère également les en-têtes de cache des polices.

Un cache de longue durée sur les fichiers de polices permet de réduire considérablement les requêtes lors des visites suivantes et améliore la fluidité globale du site.
 Optimiser la structure et les ressources critiques
Pour que font-display: swap s’intègre dans une stratégie de performance globale sous WordPress, pensez également à :
 réduire la taille des fichiers CSS : utilisez des outils ou des plugins de minification pour compresser les feuilles de style ;
 limiter les CSS critiques au-dessus de la ligne de flottaison : ne chargez pas trop de styles bloquants dans le  ;
 différer le chargement des ressources non critiques (scripts et styles non essentiels), lorsque c’est possible ;
 regrouper les polices utilisées sur plusieurs pages afin d’éviter des téléchargements redondants.
 Précharger les polices critiques (option avancée)
Pour les polices cruciales dans le premier écran, vous pouvez envisager d’utiliser  dans l’en-tête de votre site. Cela indique au navigateur que ces ressources sont prioritaires. Cependant, cette technique doit être utilisée avec prudence :
 ne préchargez que les polices vraiment indispensables au premier écran,
 évitez de précharger trop de fichiers, sous peine de saturer la bande passante disponible au détriment d’autres ressources essentielles (HTML, CSS critique, images prioritaires).
 Créer un contenu de qualité en parallèle de l’optimisation technique
 Contenu lisible et bien structuré
L’optimisation des polices, et en particulier l’usage de font-display: swap, n’a de sens que si le contenu lui-même est clair et utile. Pour améliorer l’expérience utilisateur et le référencement naturel :
 rédigez des textes clairs, structurés et hiérarchisés (titres, intertitres, paragraphes courts),
 utilisez une taille de police suffisante pour un confort de lecture sur mobile comme sur desktop,
 soignez le contraste entre le texte et le fond pour assurer l’accessibilité,
 évitez les blocs de texte trop denses qui fatiguent l’œil, même si la police est bien gérée.
 Images et médias optimisés
Les polices ne sont qu’un élément parmi d’autres de la performance globale. Pour garantir une expérience cohérente :
 compressez et redimensionnez vos images avant de les téléverser dans WordPress,
 utilisez des formats modernes lorsque c’est pertinent (WebP, AVIF),
 mettez en place le lazy-loading pour les images situées en dessous de la ligne de flottaison,
 évitez les vidéos lourdes en arrière-plan si elles n’apportent pas une réelle valeur.
 Gestion globale des performances WordPress
 Plugins de cache et de performance
Pour compléter l’implémentation de font-display: swap, l’utilisation de plugins de cache et d’optimisation aide à stabiliser les temps de chargement :
 mise en cache des pages HTML générées par WordPress,
 minification et combinaison des fichiers CSS et JS,
 optimisation des polices et éventuellement réécriture des Google Fonts,
 CDN pour servir plus rapidement les ressources statiques aux visiteurs éloignés géographiquement du serveur d’hébergement.
 Diminuer le nombre de requêtes HTTP
Chaque fichier de police, de script ou de style supplémentaire ajoute une requête HTTP (ou une ressource à gérer via HTTP/2 ou HTTP/3). Pour garder votre site fluide :
 limitez le nombre de familles de polices différentes,
 désactivez les polices intégrées non utilisées (par exemple celles de certains blocs ou widgets que vous n’utilisez jamais),
 réduisez les plugins superflus qui ajoutent leurs propres polices ou styles sans réelle valeur.
 Contrôler le comportement sur mobile
Les utilisateurs mobiles sont souvent les plus sensibles aux problèmes de chargement de polices. Il est donc indispensable de tester :
 le comportement du site sur différents smartphones (Android, iOS),
 la cohérence de la police de secours affichée pendant la phase swap,
 les éventuels reflows trop visibles sur les écrans étroits,
 la lisibilité du texte dès les premières secondes de chargement sur une connexion limitée.
 Erreurs fréquentes et corrections autour de font-display: swap
 Erreur n°1 : mettre font-display sur body ou h1
Correction : font-display doit impérativement être placé dans une règle @font-face. Si vous écrivez body { font-display: swap; }, la propriété sera simplement ignorée par le navigateur. Pour corriger, il faut :
 identifier le fichier CSS qui contient les déclarations @font-face,
 ajouter ou modifier le descripteur font-display à ce niveau.
 Erreur n°2 : croire que swap supprime tout « clignotement »
Correction : font-display: swap supprime le FOIT (texte invisible), mais entraîne à la place un FOUT (changement visuel de police). Un léger « saut » de mise en page peut donc rester perceptible. Pour le minimiser, choisissez une police de secours dont les proportions sont proches de la police finale.
 Erreur n°3 : ne pas adapter la valeur à l’usage
Correction : pour le texte de contenu, swap est généralement le meilleur choix. Pour des polices d’icônes, de logos ou de titres décoratifs très particuliers, il peut être pertinent d’utiliser d’autres approches (images vectorielles, SVG inline, systèmes d’icônes, voire block dans certains cas spécifiques) afin d’éviter l’affichage de symboles non désirés.
 Erreur n°4 : penser que les thèmes appliquent toujours swap automatiquement
Correction : de nombreux thèmes ou constructeurs ne définissent aucun font-display ou se contentent de la valeur par défaut. Il est donc fréquent que vous deviez :
 ajouter font-display: swap; à la main dans un thème enfant,
 ou installer un plugin dédié à la gestion des Google Fonts et de leur mode d’affichage.
 Conclusion pratique : intégrer font-display swap dans votre workflow WordPress
Pour tirer le meilleur parti de font-display: swap sur un site WordPress, vous pouvez suivre la démarche suivante :
 identifier les familles de polices utilisées (thème, constructeurs, plugins),
 réduire le nombre de variantes et de poids au strict nécessaire,
 héberger, si possible, vos polices vous-même ou via un CDN performant,
 déclarer vos polices avec @font-face et font-display: swap dans un thème enfant ou via un CSS avancé,
 ou utiliser un plugin spécialisé pour ajouter automatiquement swap aux Google Fonts,
 mettre en place un cache solide et des optimisations CSS/JS complémentaires,
 tester le rendu sur plusieurs navigateurs et appareils, en particulier mobiles.

En appliquant ces bonnes pratiques, vous garantirez un texte immédiatement lisible, une identité typographique cohérente et des performances WordPress solides, tout en respectant les attentes des utilisateurs et les recommandations modernes en matière d’affichage des polices web.

Font-display swap WordPress

Sommaire de l'article