Les polices web personnalisées font partie de l’identité visuelle de la plupart des sites WordPress modernes, mais elles ont un coût de performance souvent sous-estimé. Chaque police chargée représente une requête réseau supplémentaire, potentiellement vers un domaine tiers, et un risque de décalage visuel au moment où le texte change d’apparence pendant le chargement.
Entre l’auto-hébergement, la propriété font-display et le préchargement via rel="preload", plusieurs leviers permettent de charger ses polices de façon à la fois rapide et visuellement stable. Voici comment les combiner correctement.
Auto-hébergement vs Google Fonts distant
La méthode la plus répandue pour utiliser Google Fonts consiste à charger une feuille de style depuis fonts.googleapis.com, qui elle-même référence des fichiers hébergés sur fonts.gstatic.com. Cette approche est simple, mais elle implique une connexion à un domaine tiers : résolution DNS, négociation TLS, puis téléchargement, autant d’étapes qui s’ajoutent au chemin critique.
L’auto-hébergement consiste à télécharger les fichiers de police une bonne fois pour toutes et à les servir depuis son propre domaine, aux côtés des autres assets du thème. Cela supprime la latence de connexion vers un domaine externe et permet un contrôle total sur les en-têtes de cache.
- Téléchargez les fichiers
.woff2des polices utilisées, au format le plus compressé disponible. - Placez-les dans le dossier du thème, par exemple
wp-content/themes/mon-theme/fonts/. - Déclarez-les via une règle
@font-facedans la feuille de style du thème.
@font-face {
font-family: 'Inter';
src: url('/wp-content/themes/mon-theme/fonts/inter-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}Pour un thème enfant ou un plugin, l’enregistrement classique via wp_enqueue_style() reste la bonne pratique pour charger la feuille de style contenant ces déclarations @font-face, plutôt que de les injecter en inline à chaque chargement de page.
La propriété font-display et ses valeurs
Par défaut, un navigateur applique un comportement appelé bloc de police : le texte reste invisible pendant un court délai en attendant que la police personnalisée soit téléchargée, avant, dans certains cas, de basculer sur une police de secours. Ce texte invisible pénalise directement le First Contentful Paint.
La propriété font-display permet de contrôler ce comportement :
| Valeur | Comportement |
|---|---|
| auto | Comportement par défaut du navigateur, généralement un court blocage |
| block | Texte invisible jusqu’à 3 secondes, puis police de secours si besoin |
| swap | Police de secours affichée immédiatement, remplacée dès que la police custom est prête |
| fallback | Court blocage puis bascule rapide, sans échange tardif |
| optional | Le navigateur peut ignorer la police custom si la connexion est lente |
Pour la plupart des sites éditoriaux, swap est le compromis le plus raisonnable : il garantit que le texte reste lisible dès le départ, quitte à changer d’apparence une fois la police téléchargée.
font-display: swap et son impact réel sur le CLS
Attention à une confusion fréquente : font-display: swap résout le problème du texte invisible, mais pas celui du Cumulative Layout Shift. Si la police de secours et la police personnalisée n’ont pas la même largeur de caractère moyenne, le remplacement de l’une par l’autre provoque un réajustement de la mise en page : les lignes se redécoupent, les éléments qui suivent le bloc de texte se déplacent.
Pour limiter ce décalage, deux leviers complémentaires :
- Choisir une police de secours dont les métriques (largeur moyenne des caractères, hauteur) sont proches de la police personnalisée, via la propriété CSS
size-adjustou en testant plusieurs polices système proches visuellement. - Précharger la police pour réduire au maximum le délai entre l’affichage de la police de secours et son remplacement par la police définitive.
Précharger les polices critiques avec rel= »preload »
Le préchargement indique au navigateur de télécharger une ressource en priorité, avant même que le parsing du CSS ne révèle qu’elle est nécessaire. C’est particulièrement utile pour la police utilisée dans le titre principal ou le texte visible sans défilement, celle qui a le plus d’impact sur le rendu perçu.
<link rel="preload" href="/wp-content/themes/mon-theme/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>Pour l’injecter proprement dans le <head> de WordPress, on utilise l’action wp_head :
function monsite_preload_fonts() {
echo '<link rel="preload" href="' . esc_url( get_stylesheet_directory_uri() . '/fonts/inter-regular.woff2' ) . '" as="font" type="font/woff2" crossorigin>' . "\n";
}
add_action( 'wp_head', 'monsite_preload_fonts', 1 );Conseil maison : ne préchargez que les polices réellement utilisées au-dessus de la ligne de flottaison, une ou deux graisses maximum. Précharger toutes les variantes d’une famille de polices revient à créer une compétition inutile avec les autres ressources critiques de la page.
L’attribut crossorigin, un piège fréquent
Un oubli classique consiste à omettre l’attribut crossorigin sur la balise de préchargement d’une police. Les polices sont toujours chargées en mode CORS anonyme par les navigateurs, même en auto-hébergement sur le même domaine. Sans cet attribut, le navigateur télécharge la police deux fois : une fois pour le préchargement, une fois pour l’utilisation réelle, ce qui annule tout le bénéfice de l’opération.
En résumé
Auto-héberger ses polices supprime une dépendance à un domaine tiers et donne un contrôle complet sur le cache. Associé à font-display: swap pour éviter le texte invisible et à un préchargement ciblé des polices critiques avec l’attribut crossorigin, ce trio permet d’obtenir un chargement de texte à la fois rapide et visuellement stable, sans les décalages qui pénalisent le score de Cumulative Layout Shift.
