font-display: swap WordPress – Guide complet pour des polices rapides et visibles

Introduction

Optimiser les performances de votre site WordPress est une priorité absolue pour offrir une expérience utilisateur fluide, rapide et engageante. Parmi les nombreux facteurs influençant la vitesse de chargement et la qualité perçue d'un site web, l’optimisation des polices (web fonts) occupe une place cruciale. Une mauvaise gestion des polices peut provoquer un texte invisible au chargement, des sauts de mise en page ou un rendu visuel irrégulier.

C’est précisément ici que la propriété CSS font-display, et plus particulièrement la valeur font-display: swap, entre en jeu. Ce paramètre permet de contrôler l’affichage des polices pendant le chargement de la page et d’éviter le fameux FOIT (Flash of Invisible Text). Le texte reste visible avec une police de secours, puis est remplacé par la police personnalisée dès qu’elle est disponible.

Dans cet article complet, vous allez découvrir en détail comment utiliser font-display: swap sur WordPress pour améliorer la performance de vos polices web, optimiser vos Core Web Vitals et corriger l’avertissement « Ensure text remains visible during webfont load ». Nous aborderons les concepts clés, les bonnes pratiques, les différents scénarios d’implémentation (Google Fonts, polices auto‑hébergées, thèmes et plugins), ainsi qu’une FAQ détaillée.

Concepts clés

Qu’est-ce que la propriété CSS font-display ?

La propriété font-display est un paramètre CSS utilisé au sein d’une règle @font-face. Elle détermine la manière dont une police web est affichée pendant son chargement. Concrètement, elle permet de contrôler si le navigateur doit :

• afficher immédiatement une police de remplacement (fallback) le temps de charger la police personnalisée ;
• bloquer l’affichage du texte pendant un certain délai ;
• ou, dans certains cas, renoncer totalement à la police personnalisée si elle met trop de temps à se charger.

Avant l’introduction de font-display, le comportement des navigateursétait moins prévisible : certains gardaient le texte invisible jusqu’au chargement de la police, tandis que d’autres basculaient plus rapidement sur une police système. Avec font-display, vous obtenez un contrôle explicite sur ce processus, ce qui est essentiel pour l’optimisation des performances et l’expérience utilisateur.

Les principales valeurs de font-display

La propriété font-display dispose de plusieurs valeurs possibles, chacune correspondant à une stratégie de rendu différente :

• auto : comportement par défaut. Le navigateur décide seul de la stratégie d’affichage en fonction de ses propres règles internes. Vous n’avez aucun contrôle précis sur le FOIT ou le FOUT.
• block : le navigateur applique une période de blocage pendant laquelle le texte peut rester invisible si la police n’est pas encore chargée. Cette période peut durer jusqu’à environ 3 secondes sur certains navigateurs modernes, ce qui peut nuire à l’expérience utilisateur.
• swap : le navigateur affiche le texte immédiatement avec une police de remplacement (fallback), généralement une police système, puis remplace ce texte par la police web dès qu’elle est chargée. Le texte reste toujours visible.
• fallback : le navigateur utilise une période de blocage très courte, puis bascule sur une police de remplacement si la police personnalisée n’est pas disponible assez rapidement. La police web peutéventuellementêtre appliquée plus tard, mais la priorité est donnée à la lisibilité immédiate.
• optional : la police personnalisée est considérée comme non essentielle. Si elle ne se charge pas très rapidement, le navigateur peut décider de ne jamais l’afficher et de conserver la police de remplacement, surtout sur des connexions lentes ou dans des contextes d’économie de données.

FOIT, FOUT et impact sur l’expérience utilisateur

Deux phénomènes sont particulièrement importants à comprendre lorsque l’on parle de polices web :

• FOIT (Flash of Invisible Text) : le texte reste invisible pendant le chargement de la police, puis apparaît d’un seul coup lorsque la police est disponible. Ce comportement donne l’impression que la page est lente ou vide.
• FOUT (Flash of Unstyled Text) : le texte apparaît immédiatement avec une police système, puis change brusquement de style lorsque la police web se charge. Le contenu est lisible, mais la mise en page peut légèrement bouger si les polices ont des métriques différentes.

Le rôle de font-display: swap est précisément de supprimer le FOIT (texte invisible) en acceptant un FOUT maîtrisé (texte visible qui change de police). Bien paramétré, ce choix améliore nettement la perception de vitesse et les indicateurs de performance comme le First Contentful Paint (FCP) et le Largest Contentful Paint (LCP).

Pourquoi choisir font-display: swap sur WordPress ?

Sur la majorité des sites WordPress, font-display: swap est aujourd’hui la valeur recommandée. Elle offre un compromis idéal entre vitesse d’affichage, stabilité visuelle et qualité de rendu :

• l’utilisateur voit immédiatement le texte avec une police de remplacement (souvent une police système comme Arial, Helvetica ou une police par défaut de la famille sans-serif) ;
• dès que la police web est chargée, le navigateur remplace la police de secours par la police personnalisée, en conservant le texte et la structure de la page ;
• le risque d’avoir unécran vide ou du texte invisible pendant plusieurs secondes est largement réduit ;
• les avertissements de type « Ensure text remains visible during webfont load » dans les outils de mesure de performance sont généralement corrigés.

Pour ces raisons, la plupart des guides de performance récents recommandent font-display: swap comme valeur par défaut pour les polices web sur WordPress, en particulier pour le corps de texte et les contenus critiques.

Bonnes pratiques d’optimisation avec font-display: swap

Réduire et rationaliser le nombre de polices

L’utilisation de font-display: swap ne doit pas servir d’excuse pour charger un grand nombre de polices lourdes. Pour optimiser réellement vos performances WordPress, il est conseillé de :

• Limiter le nombre de familles de polices : évitez de multiplier les familles (par exemple, une police pour les titres, une pour le corps de texte, une pour les boutons, etc.) si ce n’est pas indispensable à votre identité visuelle.
• Réduire le nombre de graisses (weights) et styles : ne chargez que les graisses nécessaires (par exemple 400 et 700) et uniquement les variantes italique si vous les utilisez réellement.
• Éviter les doublons : vérifiez que votre thème, votre constructeur de page ou vos plugins ne chargent pas chacun leurs propres versions de la même police.

Choisir des polices optimisées et des formats modernes

Pour tirer un maximum de bénéfices de font-display: swap, il est important de travailler avec des polices bien optimisées :

• Format WOFF2 en priorité : le format WOFF2 offre une excellente compression et est largement supporté par les navigateurs modernes. Il est recommandé comme format principal.
• WOFF comme fallback : pour assurer la compatibilité avec des navigateurs plus anciens, vous pouvez proposer une version WOFF en plus du WOFF2.
• Polices hébergées localement ou via un CDN fiable : héberger vos polices sur votre propre serveur ou via un CDN performant réduit la latence et améliore la cohérence des temps de chargement.

Définir clairement les polices de remplacement (fallback fonts)

Le comportement de font-display: swap repose sur la présence de polices de remplacement bien définies dans votre CSS. Par exemple :

body { font-family: "YourCustomFont", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

Quelques bonnes pratiques :

• utiliser une pile de polices cohérente avec la police personnalisée (sans-serif avec sans-serif, serif avec serif, etc.) ;
• choisir des polices système répandues pour limiter les variations de rendu ;
• veiller à ce que la police de remplacement soit suffisamment proche visuellement de votre police web pour réduire les sauts de mise en page lors du swap.

Travailler sur la structure technique WordPress

Une bonne mise en œuvre de font-display: swap doit s’accompagner d’une optimisation globale de votre site WordPress :

• Hébergement performant : un hébergement de qualité réduit les temps de réponse du serveur et accélère le chargement des fichiers CSS contenant vos règles @font-face.
• Mise en cache efficace : configurez correctement le cache de page et le cache navigateur afin que les polices soient stockées localement dès la première visite.
• Minification et regroupement des CSS : regrouper et minifier vos fichiers CSS réduit le nombre de requêtes et la taille des fichiers à charger, ce qui accélère l’arrivée des déclarations de polices.
• Utilisation de HTTP/2 ou HTTP/3 : les protocoles récents gèrent mieux les multiples requêtes simultanées, ce qui profiteégalement au chargement des polices.

Qualité du contenu et expérience de lecture

Même si le cœur de cet article est technique, la finalité de l’optimisation des polices reste la lisibilité et le confort de lecture. Pour cela :

• Rédigez un contenu clair et hiérarchisé : titres (h1 à h3), paragraphes courts, listes à puces et intertitres améliorent la lisibilité et le SEO.
• Utilisez une taille de police suffisante : un corps de texte trop petit nuira à l’expérience utilisateur, même si la police se charge vite.
• Travaillez les contrastes : le contraste entre le texte et l’arrière-plan doitêtre suffisammentélevé pour un confort de lecture optimal.

Comment utiliser font-display: swap dans WordPress

1. Utiliser @font-face avec font-display: swap pour des polices auto‑hébergées

Si vous hébergez vos polices directement sur votre serveur WordPress (ce qui devient de plus en plus courant, notamment pour des raisons de conformité RGPD), vous pouvez contrôler entièrement la déclaration @font-face. Voici un exemple typique :

@font-face { font-family: "MyCustomFont"; src: url("/wp-content/themes/mon-theme/fonts/MyCustomFont.woff2") format("woff2"), url("/wp-content/themes/mon-theme/fonts/MyCustomFont.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap;
}

Pour l’intégrer dans WordPress :

• créez un fichier dédié, par exemple fonts.css, dans votre thème ou child theme ;
• placez vos déclarations @font-face dans ce fichier ;
• chargez ce fichier via functions.php en utilisant wp_enqueue_style.

Exemple de code dans functions.php :

function mon_theme_fonts { wp_enqueue_style( 'mon-theme-fonts', get_stylesheet_directory_uri . '/fonts.css', array, null );
}
add_action('wp_enqueue_scripts', 'mon_theme_fonts');

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

Sur de nombreux sites WordPress, les polices sont chargées depuis Google Fonts à l’aide d’une balise ou d’un appel généré par le thème ou un constructeur de page. Google permet d’ajouter un paramètre display=swap dans l’URL, ce qui a pour effet d’appliquer font-display: swap dans la feuille de style générée.

Exemple d’intégration recommandée :

Si votre thème vous permet de coller directement un lien Google Fonts (par exemple dans le Customizer ou les options de typographie), veillez à ce que ce paramètre display=swap soit bien présent dans l’URL.

3. Passer par un plugin dédié au paramètre display=swap

Si vous ne souhaitez pas modifier le code de votre thème ou si celui-ci génère automatiquement les appels à Google Fonts, l’utilisation d’un plugin peutêtre une solution efficace. Il existe notamment un plugin dédié capable d’ajouter automatiquement le paramètre display=swap aux URL Google Fonts, et, dans certains contextes (comme avec certains plugins de cache), d’ajouter font-display: swap dans les fichiers CSS générés.

Ce type de plugin se contente en général de :

• scanner le HTML pour détecter les appels à Google Fonts ;
• ajouter ou modifier le paramètre display=swap dans l’URL ;
• éventuellement, coopérer avec un plugin de cache pour insérer font-display: swap directement dans les styles optimisés.

L’avantage est de bénéficier de swap même si votre thème n’offre pas d’option native pour cette fonctionnalité.

4. Utiliser un plugin de cache/optimisation qui gère automatiquement font-display

Plusieurs plugins de cache et d’optimisation de performances WordPress intègrent des options spécifiques pour les polices :

• certains appliquent automatiquement font-display: swap aux Google Fonts dès leur activation ;
• d’autres proposent un réglage dédié du type « font display » avec les valeurs auto, swap, fallback, optional ;
• certains peuventégalement regrouper, héberger localement ou précharger vos polices.

Dans la pratique, un simple changement de réglage dans votre plugin de cache peut suffire à corriger l’avertissement « Ensure text remains visible during webfont load » et à améliorer vos Core Web Vitals.

5. Activer swap via votre thème WordPress

De plus en plus de thèmes WordPress modernes proposent des filtres ou des options spécifiques pour contrôler la valeur de font-display sur les polices qu’ils chargent. Par exemple, certains thèmes exposent un filtre PHP permettant de renvoyer la valeur swap pour toutes les polices Google qu’ils génèrent.

Un exemple typique (simplifié) peut ressembler à ceci :

add_filter('mon_theme_google_font_display', function { return 'swap';
});

La mise en œuvre exacte dépend du thème utilisé. Il est donc recommandé de consulter la documentation de votre thème ou d’interroger son support pour savoir s’il existe un filtre ou une option pour définir font-display.

Impact de font-display: swap sur les performances et le SEO

Core Web Vitals et texte visible

Les indicateurs Core Web Vitals (comme LCP, FID/INP, CLS) tiennent compte de la rapidité d’affichage du contenu utile et de la stabilité de la mise en page. Une police qui met du temps à se charger et qui provoque du texte invisible ou des sauts de mise en page peut dégrader ces indicateurs.

En rendant le texte immédiatement lisible avec une police de secours, font-display: swap :

• améliore la perception de vitesse côté utilisateur ;
• réduit le FOIT ;
• contribue à un meilleur score dans les outils comme PageSpeed Insights ou Lighthouse ;
• peut aider indirectement au référencement naturel, en améliorant les signaux de qualité de l’expérience utilisateur.

FOIT, FOUT et CLS (Cumulative Layout Shift)

Si vos polices de remplacement et vos polices web ont des métriques très différentes (hauteur de ligne, espacement, largeur des caractères), le passage de l’une à l’autre peut provoquer un léger déplacement du contenu, ce qui impacte le CLS.

Pour limiter cet effet tout en conservant font-display: swap, vous pouvez :

• choisir une police de remplacement visuellement proche de votre police principale ;
• ajuster la taille de la police de secours pour qu’elle corresponde au mieux à la police finale ;
• précharger les polices critiques (via ) afin de réduire la fenêtre pendant laquelle la police de secours est affichée.

Google Fonts et valeur par défaut

Lorsque vous générez un lien Google Fonts à partir de l’interface en ligne, il est aujourd’hui possible (et fortement recommandé) de spécifier le paramètre display=swap dans l’URL. Dans de nombreux exemples de code proposés, cette valeur est intégrée d’office dans le lien fourni, ce qui permet d’éviter le FOIT sans action supplémentaire.

Cependant, si vous utilisez un ancien snippet Google Fonts ou un thème qui n’ajoute pas ce paramètre, il est important de le vérifier manuellement et de l’ajouter si nécessaire.

Étapes pratiques pour corriger « Ensure text remains visible during webfont load »

1. Identifier la source des polices sur votre site WordPress

Avant de modifier quoi que ce soit, commencez par identifier comment vos polices sont chargées :

• via un lien Google Fonts dans le du site ;
• via des polices auto‑hébergées dans votre thème ou child theme ;
• via un constructeur de page ou un plugin (Elementor, Divi, builder spécifique, etc.) ;
• via un plugin de typographie ou une fonctionnalité intégrée au thème.

Vous pouvez utiliser l’inspecteur du navigateur (onglet Réseau → filtrer sur les fichiers CSS et polices) ou les rapports d’outils comme PageSpeed Insights pour repérer quelles URL de polices sont concernées.

2. Ajouter ou vérifier display=swap pour Google Fonts

Si les polices proviennent de Google Fonts :

• vérifiez l’URL dans le code source et assurez-vous qu’elle contient &display=swap (ou ?display=swap selon les paramètres existants) ;
• si ce n’est pas le cas, modifiez l’URL dans votre thème, votre plugin ou votre constructeur de page ;
• en cas d’impossibilité de modifier directement, envisagez l’usage d’un plugin spécialisé qui injecte ce paramètre automatiquement.

3. Ajouter font-display: swap aux règles @font-face

Pour les polices auto‑hébergées, ou lorsque vos CSS de polices sont générées par un plugin, vous devrez vous assurer que chaque déclaration @font-face contient font-display: swap;. Par exemple :

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

Si vos polices sont générées automatiquement par un plugin, vérifiez si ce dernier propose un réglage spécifique pour font-display. Le caséchéant, activez la valeur swap.

4. Tester le résultat dans PageSpeed Insights et Lighthouse

Une fois les modifications appliquées :

• lancez un audit avec PageSpeed Insights ou Lighthouse ;
• vérifiez que l’avertissement « Ensure text remains visible during webfont load » a disparu ;
• contrôlezégalement les indicateurs LCP, FCP et CLS pour mesurer l’impact global.

Compatibilité navigateur et support de font-display

La propriété font-display est prise en charge par l’immense majorité des navigateurs modernes. La compatibilité couvre aujourd’hui les principaux navigateurs desktop et mobiles. Sur les rares navigateurs qui ne supportent pas font-display, la propriété est simplement ignorée et le comportement par défaut du navigateur s’applique.

En conséquence, il est considéré comme sûr d’utiliser font-display: swap sur les sites WordPress modernes, sans risque majeur de dégradation de l’affichage sur les navigateurs actuels.

FAQ – Questions fréquentes sur font-display: swap et WordPress

1. font-display: swap est-il toujours le meilleur choix ?

Pour la grande majorité des sites WordPress, swap est la valeur la plus adaptée, en particulier pour le corps de texte et le contenu critique. Elle garantit un texte immédiatement lisible et limite le FOIT. Dans des cas très spécifiques où la cohérence visuelle prime absolument sur la vitesse (par exemple, certains sites de marque très orientés design), on peut envisager des stratégies différentes pour certainséléments, mais cela reste marginal.

2. font-display: swap peut-il dégrader mon design ?

Le seul impact visuel potentiel est un léger changement de la mise en page lorsque la police passe de la police de secours à la police web. Ce phénomène est généralement discret si vous choisissez une police de remplacement proche visuellement de la police finale et que vous limitez le nombre de styles et de poids différents.

3. Puis-je combiner font-display: swap avec le préchargement de polices ?

Oui, et c’est même une très bonne pratique dans certains cas. Vous pouvez utiliser des balises pour indiquer au navigateur de charger en priorité les polices les plus importantes (par exemple celle du corps de texte). Combiné à font-display: swap, cela réduit le temps pendant lequel la police de secours est affichée tout en gardant le texte lisible dès le début.

4. Dois-je appliquer font-display: swap à toutes mes polices ?

Pour les polices critiques (corps de texte, menus, titres principaux), swap est largement recommandé. Pour des polices décoratives ou non essentielles (par exemple une police utilisée uniquement pour un logo texte ou unélément de design secondaire), vous pouvez envisager des stratégies différentes, comme fallback ou optional, en fonction de vos priorités de design et de performance.

5. Comment savoir si mon thème applique déj à font-display: swap ?

Vous pouvez :

• inspecter le code source et les fichiers CSS générés pour rechercher font-display: ;
• vérifier si l’URL des Google Fonts contient le paramètre display=swap ;
• consulter la documentation de votre thème ou interroger le support ;
• utiliser les outils de développement de votre navigateur pour observer le comportement du texte au chargement.

6. font-display: swap est-il suffisant pour corriger tous les problèmes de performances liés aux polices ?

font-display: swap est une brique importante, mais ce n’est pas une solution miracle. Pour une optimisation complète, vous devrezégalement :

• réduire le nombre de polices et de variantes chargées ;
• utiliser des formats modernes comme WOFF2 ;
• activer la mise en cache et le préchargement si nécessaire ;
• éviter de charger des polices inutilisées sur certaines pages.

Conclusion

La propriété font-display: swap est aujourd’hui un levier incontournable pour optimiser les performances des polices web sur WordPress. En gardant le texte visible avec une police de secours, puis en appliquant la police personnalisée dès qu’elle est disponible, elle améliore la perception de vitesse, réduit le FOIT et aide à obtenir de meilleurs résultats dans les outils comme PageSpeed Insights.

En combinant font-display: swap avec une stratégie globale d’optimisation (réduction du nombre de polices, formats modernes, mise en cache, préchargement et configuration adaptée de vos thèmes et plugins), vous pouvez significativement améliorer l’expérience utilisateur, la lisibilité de vos contenus et, à terme, les performances SEO de votre site WordPress.