Lorsque vous lancez un audit de site avec PageSpeed Insights, l’un des diagnostics fréquents est «Ensure text remains visible during webfont load». Le problème est bien connu de toute personne ayant installé Elementor, Astra ou connecté des Google Fonts: pendant que le navigateur télécharge le fichier de police, le texte de la page est tout simplement absent. Un écran blanc à la place d’un titre, une fraction de seconde de vide, et le visiteur est déjà parti.

Techniquement, on appelle cela le FOIT (Flash of Invisible Text). La cause se trouve dans la directive font-display que le navigateur utilise par défaut. Sans préciser explicitement font-display: swap, le navigateur attend le chargement de la police et n’affiche pas le texte tant que le fichier n’est pas reçu. Et si la police est chargée depuis un CDN via un domaine tiers, la latence s’accumule et PageSpeed Insights déclenche un avertissement.

La solution repose sur deux actions: d’abord, chaque @font-face doit recevoir font-display: swap, afin que le navigateur affiche immédiatement le texte dans une police système et la «remplace» par la police personnalisée une fois celle-ci chargée. Ensuite, les polices critiques (celle utilisée pour le titre dans le premier écran) doivent être préchargées via <link rel="preload">. Voici une explication pas à pas pour mettre cela en œuvre dans WordPress, en tenant compte des plugins comme Elementor et des thèmes comme Astra.

💡 Aperçu rapide:

• Ouvrez le rapport PageSpeed Insights et notez les polices problématiques indiquées dans les diagnostics
• Désactivez les styles du plugin et du thème via wp_dequeue_style dans functions.php
• Copiez les fichiers de police dans un dossier local et recréez le font-face avec font-display: swap
• Ajoutez le preload pour une ou deux polices du premier écran
• Pour les polices personnalisées Elementor, changez le chemin en local et reconstruisez le CSS

Étape 1: repérer les polices problématiques dans le rapport

Lancez un audit sur PageSpeed Insights, attendez le résultat et trouvez la section des diagnostics. Nous cherchons l’élément «Ensure text remains visible during webfont load».

Dépliez la liste pour voir les URL précises des polices qui ne comportent pas font-display: swap. Il s’agit généralement de:

• fontawesome-webfont.woff2, Font Awesome fourni par Elementor;
• eicons.woff2, la police d’icônes d’Elementor;
• Google Fonts (Open Sans, Roboto, Montserrat), si le thème les appelle via CDN.

Notez les noms de fichiers; vous en aurez besoin pour les étapes suivantes. L’essentiel est maintenant de comprendre quel plugin ou quel thème est responsable de chaque police. Font Awesome et eicons proviennent d’Elementor. Les Google Fonts sont le plus souvent connectées par le thème; dans Astra, il s’agit du hook astra-google-fonts.

Étape 2: désactiver les styles qui chargent les polices

Il s’agit maintenant de supprimer la connexion standard de ces polices afin de pouvoir les réintroduire ensuite avec les bons réglages. Allez dans le functions.php du thème enfant (ou dans un plugin de code comme Code Snippets) et ajoutez:

1
/**
2
 * Disable styles that load problematic fonts
3
 */
4
function sdstudio_dequeue_font_styles()
5
{
6
    // Astra — Google Fonts
7
    wp_dequeue_style('astra-google-fonts');
8
    wp_deregister_style('astra-google-fonts');
9
 
10
    // Elementor — Font Awesome 4
11
    wp_dequeue_style('font-awesome');
12
    wp_deregister_style('font-awesome');
13
 
14
    // Elementor — eicons
15
    wp_dequeue_style('elementor-icons');
16
    wp_deregister_style('elementor-icons');
17
}
18
add_action('wp_enqueue_scripts', 'sdstudio_dequeue_font_styles', 9999);
19
add_action('wp_head', 'sdstudio_dequeue_font_styles', 9999);

La priorité 9999 est importante: le hook doit s’exécuter APRÈS que les plugins et le thème ont enregistré leurs styles. Si la police se charge encore, vérifiez si un autre plugin ne l’appelle pas (par exemple, un menu ou un formulaire de contact peut embarquer sa propre version de Font Awesome). Cherchez dans les fichiers du plugin la chaîne wp_enqueue_style avec le handle correspondant.

Après avoir ajouté ce code, l’icône Font Awesome du site disparaîtra temporairement; c’est normal. Nous la rétablirons à l’étape 4.

Étape 3: copier les fichiers de police dans un dossier local

Lorsqu’une police est connectée via CDN ou par l’intermédiaire d’un plugin, le navigateur effectue une requête DNS supplémentaire vers un domaine tiers. L’hébergement local des polices supprime cette latence. La méthode:

• Trouvez les fichiers de police dans l’arborescence du plugin. Pour Font Awesome d’Elementor, le chemin sera: /wp-content/plugins/elementor/assets/lib/font-awesome/fonts/. Pour eicons: /wp-content/plugins/elementor/assets/lib/eicons/fonts/. Pour les Google Fonts, téléchargez les .woff2 depuis le CDN de Google Fonts.

• Créez un dossier /wp-content/fonts/ à la racine du site et copiez-y tous les fichiers nécessaires. Les formats .woff2 (navigateurs modernes) et .woff (solution de repli pour les anciens) suffisent.

• Si la police était connectée par le thème via le CDN Google Fonts, téléchargez manuellement le .woff2 actuel via un lien direct ou en utilisant le plugin OMGF (nous y reviendrons).

Chaque police dispose maintenant d’un chemin local du type /wp-content/fonts/fontawesome-webfont.woff2. Passons à la partie la plus importante: leur connexion.

Étape 4: connecter les polices avec font-display: swap et preload

Les styles sont désactivés, les fichiers sont en place. Nous allons maintenant définir @font-face avec la bonne directive font-display: swap et ajouter le preload pour un chargement instantané. Placez le code dans functions.php via le hook wp_head:

1
/**
2
 * Load fonts locally with font-display: swap and preload
3
 */
4
function sdstudio_inject_font_preload()
5
{
6
    ?>
7
    <!-- Preload critical fonts -->
8
    <link rel="preload" href="/wp-content/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
9
    <link rel="preload" href="/wp-content/fonts/eicons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
10
 
11
    <style>
12
        /* Font Awesome — icon font */
13
        @font-face {
14
            font-family: 'FontAwesome';
15
            font-display: swap;
16
            font-style: normal;
17
            font-weight: normal;
18
            src: url('/wp-content/fonts/fontawesome-webfont.woff2') format('woff2'),
19
                 url('/wp-content/fonts/fontawesome-webfont.woff') format('woff');
20
        }
21
 
22
        /* eicons — Elementor icons */
23
        @font-face {
24
            font-family: 'eicons';
25
            font-display: swap;
26
            font-style: normal;
27
            font-weight: normal;
28
            src: url('/wp-content/fonts/eicons.woff2') format('woff2'),
29
                 url('/wp-content/fonts/eicons.woff') format('woff');
30
        }
31
    </style>
32
    <?php
33
}
34
add_action('wp_head', 'sdstudio_inject_font_preload', 5);

La priorité 5 dans wp_head signifie que les balises preload apparaîtront parmi les premières dans le <head>, de sorte que le navigateur commencera à télécharger la police avant même d’arriver au CSS. L’attribut crossorigin="anonymous" est obligatoire pour le préchargement des polices: sans lui, le navigateur ignorera le preload et téléchargera le fichier une seconde fois.

Un point important: l’URL à l’intérieur de @font-face ne doit pas contenir de paramètres de requête comme ?#iefix ou ?v=4.7.0. PageSpeed Insights bute dessus lors de l’analyse. Le lien doit être propre: /wp-content/fonts/fontawesome-webfont.woff2, et c’est tout.

Après avoir ajouté le code, videz le cache (plugin de cache + Cloudflare, le cas échéant) et relancez PageSpeed Insights. L’avertissement concernant les polices devrait disparaître. Les icônes Font Awesome retrouvent leur place, mais sans bloquer l’affichage du texte.

Étape 5: polices personnalisées Elementor, un cas particulier

Si vous utilisez Elementor Pro avec la fonctionnalité «Polices personnalisées», la logique est la même, mais deux étapes supplémentaires sont nécessaires.

Premièrement, modifiez le chemin de la police dans les réglages d’Elementor. Allez dans Elementor → Polices personnalisées, ouvrez la police souhaitée et, dans le champ URL, indiquez le chemin local /wp-content/fonts/your-font.woff2 au lieu d’un lien CDN externe ou Google Fonts:

Deuxièmement, reconstruisez le CSS d’Elementor. Après avoir changé le chemin, allez dans Elementor → Outils → Régénérer le CSS et cliquez sur le bouton de régénération. Cela forcera Elementor à reconstruire les fichiers de style avec les nouveaux chemins de police:

Après la régénération, vérifiez que le chemin de la police dans le HTML de la page pointe bien vers le fichier local, et non vers le CDN. Ensuite, dans header.php (ou via wp_head comme à l’étape 4), ajoutez le preload pour cette police:

1
<link rel="preload" href="/wp-content/fonts/FuturaBookC.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Et le @font-face correspondant avec font-display: swap:

1
@font-face {
2
    font-family: 'FuturaBookC';
3
    font-display: swap;
4
    font-style: normal;
5
    font-weight: normal;
6
    src: url('/wp-content/fonts/FuturaBookC.woff2') format('woff2'),
7
         url('/wp-content/fonts/FuturaBookC.woff') format('woff');
8
}

Solution alternative: des plugins pour une optimisation automatique

La méthode manuelle offre un contrôle total mais demande de l’attention lors des mises à jour des plugins (une mise à jour d’Elementor peut rétablir la connexion standard des polices). Si vous souhaitez automatiser le processus, voici deux plugins qui résolvent le problème sans toucher au code.

OMGF (Optimize My Google Fonts). Un plugin gratuit qui scanne toutes les Google Fonts du site, les télécharge en local et ajoute automatiquement font-display: swap. Installez-le, cliquez sur «Optimize», et toutes les Google Fonts de votre thème deviennent locales avec les bons en-têtes. La version Pro peut gérer Adobe Fonts et toutes les polices de CDN tiers.

Swap Google Fonts Display. Un plugin minimaliste qui fait exactement une chose: il ajoute font-display: swap à toutes les Google Fonts à la volée. Il ne télécharge pas en local, mais fait disparaître l’avertissement PageSpeed Insights en 10 secondes d’installation. Convient comme solution temporaire ou si l’hébergement local des polices n’est pas critique.

Les plugins font gagner du temps, mais rappelez-vous: ils ne fonctionnent qu’avec les Google Fonts. Les polices d’icônes (Font Awesome, eicons) et les polices personnalisées Elementor ne sont pas concernées; vous devrez tout de même passer par les étapes manuelles 1 à 5.

⁉️🤔 Questions fréquentes

Faut-il précharger TOUTES les polices du site?

Non. <link rel="preload"> n’a de sens que pour une ou deux polices qui apparaissent dans le premier écran, par exemple la police du titre H1 et celle du texte principal. Précharger une dizaine de polices aurait l’effet inverse: le navigateur consommerait de la bande passante pour des fichiers dont il n’a pas besoin immédiatement et ralentirait le chargement du contenu critique. Préchargez uniquement les polices utilisées dans la première fenêtre visible. Pour un blog type, cela représente une police de titre et une police de texte, soit deux fichiers woff2 au total. Précharger une police d’icônes n’est utile que si une icône apparaît dans le premier écran (menu, recherche). Tout le reste se chargera au fur et à mesure du défilement sans nuire aux métriques PageSpeed.

Que faire si le site «casse» après la désactivation des styles?

Le scénario le plus courant: vous avez désactivé elementor-icons, et les flèches du slider ou l’icône de recherche ont disparu. La solution consiste à vérifier, avant de désactiver, quels éléments utilisent précisément la police. Ouvrez les DevTools (F12), onglet Éléments, trouvez l’icône et regardez la classe CSS. Si la classe commence par fa-, c’est Font Awesome. Si elle commence par eicon-, ce sont les eicons. Désactivez uniquement ce qui est réellement utilisé, et reconnectez les mêmes fichiers en local; visuellement, rien ne changera. Le site «casse» dans deux cas: soit vous avez désactivé un style qui, en plus de la police, contenait des règles CSS (rare, mais cela arrive avec des thèmes comme Astra), soit vous n’avez pas reconnecté la police en local. Dans le premier cas, extrayez les règles CSS du fichier désactivé et copiez-les dans votre bloc wp_head. Dans le second cas, ajoutez simplement le @font-face manquant.

Cette méthode fonctionne-t-elle pour n’importe quel thème WordPress?

Oui, avec des réserves. Le principe dequeue style → local fonts → font-display: swap → preload est universel. Seuls les handles de style changent: pour Astra, c’est astra-google-fonts, pour GeneratePress, c’est generate-fonts, pour OceanWP, c’est oceanwp-google-fonts. Pour trouver le handle de votre thème, ouvrez le code source de la page (Ctrl+U), cherchez <link rel="stylesheet" avec la police et regardez l’id de la balise; c’est le handle. Remplacez-le ensuite dans wp_dequeue_style. Les thèmes modernes (2024-2026) ajoutent de plus en plus font-display: swap par défaut: Twenty Twenty-Five et les thèmes basés sur theme.json possèdent déjà ce réglage. Avant de modifier le code, vérifiez si votre thème ne fait pas déjà tout correctement et si l’avertissement n’est pas causé uniquement par une police d’icônes provenant d’un plugin tiers.

Est-il obligatoire de copier les polices en local?

Techniquement, non. font-display: swap fonctionne aussi avec des polices connectées via CDN (Google Fonts, cdnjs). Mais l’hébergement local offre deux avantages: d’une part, vous supprimez une requête DNS supplémentaire vers un domaine tiers (gain de 50 à 200 ms), d’autre part, vous ne dépendez pas de la disponibilité du CDN. Si Google Fonts tombe en panne, votre site conservera un texte lisible. Pour un site en production, l’hébergement local est une bonne pratique; pour un projet personnel, c’est facultatif. Exception: les polices d’icônes. Font Awesome, eicons et dashicons se chargent depuis le plugin (donc localement par définition); les copier dans le dossier racine sert uniquement à «intercepter» le contrôle du chargement après le dequeue. Le fichier lui-même est déjà physiquement sur le serveur.

Que faire face à l’avertissement sur les polices: l’algorithme final

Suivez les cinq étapes de ce guide, et l’avertissement «Ensure text remains visible during webfont load» disparaîtra du rapport PageSpeed Insights. En résumé: désactivez la connexion standard → placez les polices en local → réintroduisez-les avec font-display: swap → préchargez les woff2 critiques → pour Elementor, changez en plus le chemin et reconstruisez le CSS. Résultat: le texte du site est visible instantanément, les métriques LCP et FCP s’améliorent, et le visiteur ne voit pas de page qui «saute».

Si vous ne souhaitez pas plonger dans le code, commencez par le plugin OMGF pour les Google Fonts. Pour les polices d’icônes, il n’existe pas de «pilule magique» sous forme de plugin; vous devrez tout de même les traiter manuellement, mais c’est 20 minutes de travail qui paient en retour avec de meilleurs scores PageSpeed et de réelles améliorations de la vitesse de chargement. Essayez et testez après chaque modification; seul un audit répété montrera que le problème est réellement résolu.