Utiliser @font-face dans WordPress : guide complet pour les polices personnalisées

Sommaire de l'article

Introduction

La personnalisation des polices de caractères est unélément clé pour améliorer l'apparence, la lisibilité et l’identité visuelle d’un site WordPress. Grâce à la règle CSS @font-face, vous pouvez intégrer des polices personnalisées hébergées directement sur votre serveur, sans dépendre uniquement de bibliothèques externes. Bien utilisée, cette fonctionnalité permet d’obtenir un design unique tout en préservant les performances et le référencement naturel.

Dans cet article, nous allons explorer en détail comment implémenter @font-face dans WordPress de manière optimale. Vous découvrirez :

les concepts clés autour des polices personnalisées WordPress ;
les différentes méthodes d’intégration (thème, thème enfant, plugin, Font Library) ;
les bonnes pratiques de performance (formats, compression, font-display) ;
les impacts sur l’expérience utilisateur et la vitesse de chargement ;
une FAQ pour répondre aux questions les plus courantes.

L’objectif est de vous fournir un guide opérationnel pour utiliser font-face WordPress sans nuire aux Core Web Vitals, ni à la compatibilité navigateur.

Concepts clés autour de @font-face et WordPress

Pour bien comprendre le fonctionnement de @font-face dans WordPress, il est nécessaire de maîtriser quelques notions fondamentales.

La règle CSS @font-face

@font-face est une règle CSS qui vous permet de déclarer une police personnalisée à partir d’un ou plusieurs fichiers de fontes hébergés sur votre site. Une fois la police déclarée, vous pouvez l’utiliser dans vos styles via la propriété font-family, comme n’importe quelle police système.

Exemple de déclaration moderne avec un fichier WOFF2 :

@font-face { font-family: 'MaPolicePerso'; src: url('wp-content/themes/mon-theme-child/fonts/mapoliceperso.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap;
}

Ensuite, vous appliquez cette police auxéléments de votre choix :

body { font-family: 'MaPolicePerso', Helvetica, Arial, sans-serif;
}

Polices web vs polices “traditionnelles”

Les polices web correspondent à des formats spécialement optimisés pour le web, comme WOFF et surtout WOFF2. Ces formats offrent une meilleure compression et un chargement plus rapide que les formats de bureau classiques comme TTF ou OTF. Les navigateurs modernes prennent en charge WOFF2 et WOFF de manière très large, ce qui en fait le choix recommandé en 2025.

Les formats TTF et OTF restent généralement supportés, mais ils produisent des fichiers plus lourds. Ils peuvent servir de solution de secours pour certains contextes particuliers, mais ils ne doivent plusêtre utilisés comme format principal lorsqu’on vise des performances optimales.

Intégration dans WordPress

WordPress permet l’intégration de polices personnalisées de plusieurs façons complémentaires :

via un thème enfant et un fichier CSS dédié (par exemple fonts.css) dans lequel vous déclarez vos règles @font-face ;
via la Font Library disponible nativement à partir de WordPress 6.5 pour les thèmes compatibles avec l’éditeur de site complet (Full Site Editing) ;
via le Customizer et les options de typographie des thèmes classiques qui intègrent Google Fonts ;
via des plugins de gestion de polices (Google Fonts, Adobe Fonts, polices locales, etc.) ;
via du code personnalisé dans un thème ou un thème enfant (enqueuing de feuilles de style supplémentaires, déclaration de polices dans theme.json pour les thèmes bloc).

En combinant les polices personnalisées WordPress et une bonne stratégie de performance, vous améliorez non seulement l’apparence de votre site mais aussi sa cohérence graphique et sa lisibilité.

Formats de polices recommandés pour WordPress

Le choix du format de police a un impact direct sur la vitesse de chargement, la compatibilité et la consommation de bande passante.

WOFF2 : le format à privilégier

WOFF2 est aujourd’hui le format standard recommandé pour le web. Il offre un excellent taux de compression, ce qui réduit la taille des fichiers et donc le temps de chargement des pages. Les principaux navigateurs modernes le supportent, ce qui en fait le premier format à utiliser dans vos règles @font-face.

WOFF : la solution de secours moderne

WOFF reste un format largement supporté. Il est un peu moins optimisé que WOFF2, mais il assure une très bonne compatibilité avec d’anciens navigateurs qui ne prennent pas en charge WOFF2. Vous pouvez l’ajouter en second dans votre règle @font-face si vous ciblez un public utilisant encore des navigateurs plus anciens.

TTF / OTF : pour une compatibilitéétendue, mais à utiliser avec parcimonie

Les formats TTF (TrueType) et OTF (OpenType) restent compréhensibles par la plupart des navigateurs. Toutefois, ils sont plus lourds et moins adaptés aux optimisations modernes. Dans la majorité des cas, il est préférable de proposer au minimum WOFF2, éventuellement WOFF, et de limiter TTF/OTF voire de les convertir au préalable.

Méthodes pour ajouter des polices personnalisées dans WordPress

Il existe plusieurs approches pour utiliser @font-face dans WordPress. Le choix dépend de votre niveau technique, du type de thème utilisé (classique ou bloc) et de votre besoin de contrôle.

1. Utiliser un thème enfant et un fichier CSS dédié

C’est l’une des méthodes les plus propres et durables pour intégrer des polices personnalisées dans WordPress.

Créer un thème enfant (si ce n’est pas déj à fait) afin de ne pas perdre vos modifications lors des mises à jour du thème parent.
Créer un dossier de polices dans le thème enfant, par exemple wp-content/themes/mon-theme-child/fonts/.
Téléverser vos fichiers de polices au format WOFF2, éventuellement WOFF.
Créer un fichier CSS (par exemple fonts.css) dans le thème enfant, où vous allez déclarer vos règles @font-face.
Enqueuer ce fichier CSS dans le fichier functions.php du thème enfant via wp_enqueue_style.

Exemple de déclaration dans fonts.css :

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

Puis, dans votre fichier style.css ou directement dans fonts.css, vous appliquez la police auxéléments souhaités :

body { font-family: 'MaPolicePerso', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

2. Utiliser la Font Library (WordPress 6.5+)

À partir de WordPress 6.5, une Font Library est intégrée au cœur de WordPress pour les sites utilisant des thèmes bloc compatibles avec l’éditeur de site complet. Cette bibliothèque permet :

d’ajouter et de gérer des polices locales ;
d’utiliser des polices Google Fonts intégrées de manière contrôlée ;
de relier les polices à la configuration du thème via theme.json.

Cette approche réduit la nécessité de gérer manuellement les fichiers et les règles CSS dans certains contextes, tout en restant compatible avec une intégration plus avancée via @font-face si besoin.

3. Utiliser le Customizer pour les thèmes classiques

De nombreux thèmes WordPress “classiques” proposent des options de typographie dans le Customizer. Vous pouvez ainsi :

aller dans Apparence > Personnaliser ;
ouvrir la section Typographie ou Polices ;
choisir des polices Google Fonts pour les titres et le texte de base.

Cette méthode ne repose pas directement sur vos propres fichiers de polices via @font-face, mais elle permet d’intégrer facilement des polices tierces sansécrire de code. Pour les utilisateurs non techniques, c’est souvent la solution la plus rapide.

4. Utiliser un plugin de polices WordPress

Les plugins dédiés aux polices simplifient fortement le processus, notamment si vous ne souhaitez pas intervenir dans le code. Ils permettent généralement :

d’ajouter des polices Google Fonts ou Adobe Fonts ;
d’importer des polices locales que vous téléversez vous-même ;
d’assigner des polices à certainséléments (titres, corps de texte, menus) via une interface graphique.

Certains plugins proposent aussi la conversion automatique des formats, la génération de CSS d’@font-face et des options de chargement optimisé.

5. Ajouter manuellement @font-face dans un thème

Pour les utilisateurs à l’aise avec le code, ajouter manuellement @font-face reste la méthode donnant le plus de contrôle :

téléversement des fichiers de polices sur le serveur (dans le thème, le thème enfant, ou un répertoire dédié dans uploads) ;
déclaration des règles @font-face dans une feuille de style globale ;
application des polices via font-family sur les sélecteurs adéquats.

Cette approche est idéale si vous souhaitez une maîtrise fine du comportement des polices, des fallbacks et des performances.

Bonnes pratiques de performance avec @font-face dans WordPress

Utiliser des polices personnalisées améliore le design, mais peut aussi alourdir les pages si cela est mal géré. Voici les bonnes pratiques à suivre pour optimiser font-face WordPress.

Limiter le nombre de polices et de variantes

Chaque fichier de police ajouté représente une requête et un fichier supplémentaire à télécharger. Il est donc recommandé de :

limiter le nombre de familles de polices ;
n’utiliser que les graisses nécessaires (par exemple 400 et 700 plutôt que toute la gamme de 100à 900) ;
éviter de multiplier les styles redondants (italique non utilisé, petites capitales non exploitées, etc.).

Une stratégie classique consiste à utiliser une police pour le texte courant et une autre pour les titres, avec un nombre restreint de variantes.

Utiliser font-display: swap

La propriété font-display dans la règle @font-face permet de contrôler le comportement de rendu de la police pendant son chargement. La valeur swap est particulièrement recommandée, car elle :

évite l’affichage de texte invisible pendant le chargement des polices (FOIT) ;
utilise immédiatement une police de secours, puis remplace le texte par la police personnalisée dès qu’elle est disponible ;
améliore la perception de vitesse et les indicateurs Core Web Vitals liés à l’affichage du contenu.

Exemple :

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

Soigner le choix des polices de secours (fallbacks)

Dans votre font-family, il est important de prévoir des polices de secours au cas où la police personnalisée ne pourrait pasêtre chargée. Par exemple :

body { font-family: 'MaPolicePerso', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

Ces polices de secours garantissent une lisibilité correcte même en l’absence de la police principale.

Réduire la taille et le nombre de fichiers

Pour optimiser les performances WordPress :

utilisez en priorité des fichiers WOFF2 compressés ;
supprimez les variantes de polices non utilisées ;
hébergez les polices localement lorsque c’est pertinent pour réduire la dépendance à des services tiers et potentiels délais de connexion ;
éventuellement, regroupez les déclarations de polices dans un fichier CSS dédié chargé une seule fois.

Éviter le chargement inutile sur certaines pages

Si certaines polices ne sont utilisées que sur des sections très spécifiques (par exemple une police décorative pour des titres sur une page de campagne), envisagez de ne charger ces polices que sur les pages concernées, via des conditions dans functions.php ou via des règles de chargement spécifique d’un outil de mise en cache.

Expérience utilisateur, lisibilité et cohérence visuelle

La mise en place de @font-face dans WordPress n’est pas uniquement une question de technique : elle impacte directement l’expérience utilisateur.

Lisibilité avant tout

Lors du choix de vos polices personnalisées :

assurez-vous que la taille, l’interlignage et le contraste sont suffisants pour une lecture confortable ;
privilégiez des polices simples pour le corps de texte (souvent des sans-serif ou des serif bien lisibles) ;
réservez les polices plus originales ou très décoratives aux titres, slogans ouéléments graphiques ponctuels.

Cohérence graphique

Une identité visuelle forte repose sur une utilisation cohérente des polices :

limitez-vous généralement à deux familles principales (une pour les titres, une pour le texte) ;
définissez des styles typographiques clairs (ex. titres H1–H6, menus, boutons) dans votre feuille de style ou dans theme.json pour les thèmes bloc ;
assurez-vous de conserver la même hiérarchie typographique sur l’ensemble du site.

Accessibilité

Les polices personnalisées influencent aussi l’accessibilité :

évitez les polices trop fines pour les textes de petite taille ;
veillez au contraste entre le texte et l’arrière-plan ;
testez vos polices sur plusieurs navigateurs et appareils (mobile, tablette, desktop) ;
assurez-vous que le site reste utilisable si la police personnaliséeéchoue (grâce aux fallbacks).

Outils et ressources utiles pour gérer les polices dans WordPress

Pour faciliter l’utilisation de font-face WordPress et la gestion globale de la typographie, plusieurs outils sont particulièrement utiles.

Outils d’analyse et de suivi

Google Search Console : permet de suivre l’impact indirect de vos choix de polices sur les performances et le référencement (vitesse, Core Web Vitals, erreurséventuelles liées aux ressources).
Google Analytics ou outils d’analyticséquivalents : mesurent le comportement des utilisateurs, le taux de rebond, la durée de session, ce qui peut refléter la lisibilité et le confort de lecture.
Outils de test de performance (PageSpeed Insights, Lighthouse, etc.) : permettent de mesurer le poids des polices, de repérer les fichiers lourds ou bloquants, et d’identifier des axes d’optimisation.

Bibliothèques de polices

Google Fonts : grande bibliothèque gratuite de polices web prêtes à l’emploi, utilisables via CDN ou en auto-hébergement. Pratique pour trouver des combinaisons de polices adaptées à votre thème WordPress.
Adobe Fonts : solution payante offrant un catalogue vaste et de haute qualité, souvent utilisée pour des identités visuelles premium. L’intégration se fait généralement via un script ou une configuration spécifique et peut coexister avec vos propres polices locales.
Autres répertoires de polices libres ou commerciales : selon vos besoins de licences, vous pouvez télécharger les fichiers et les intégrer via @font-face dans votre thème enfant.

Outils de développement et de test

Inspecteur de navigateur : indispensable pour vérifier quelle police est effectivement utilisée, contrôler les fallbacks, repérer d’éventuels conflits CSS ou problèmes de chemin de fichier.
Éditeur de code : pour modifier proprement vos fichiers style.css, fonts.css, functions.php ou theme.json.

Exemples de mise en œuvre de @font-face dans WordPress

Exemple avec un thème enfant et un fichier fonts.css

Supposons que vous souhaitiez charger une police personnalisée nommée “BrandSans” dans votre thème enfant.

Créez le dossier wp-content/themes/mon-theme-child/fonts/.
Placez le fichier brandsans.woff2 dans ce dossier.
Créez un fichier fonts.css dans le thème enfant avec le contenu suivant :

@font-face { font-family: 'BrandSans'; src: url('fonts/brandsans.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap;
}

Dans functions.php du thème enfant, ajoutez une fonction qui enqueut ce fichier fonts.css en plus de votre style.css.
Dans votre style.css, appliquez la police :

body { font-family: 'BrandSans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

Gestion de plusieurs graisses pour la même police

Si vous disposez par exemple d’une graisse normale (400) et d’une graisse bold (700), vous pouvez déclarer deux règles @font-face :

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

Ensuite, vous pouvez utiliser font-weight: 400 ou font-weight: 700 dans vos styles CSS pour alterner entre ces variantes sans changer de famille de police.

FAQ : @font-face et polices personnalisées dans WordPress

Quelles sont les meilleures pratiques pour utiliser @font-face dans WordPress ?

Utilisez en priorité des formats modernes comme WOFF2, limitez le nombre de familles et de variantes de polices, déclarez vos règles @font-face dans un fichier CSS global (par exemple fonts.css d’un thème enfant), utilisez font-display: swap et prévoyez des polices de secours pour une bonne lisibilité.

Est-ce que l’utilisation de @font-face affecte la vitesse de mon site ?

Oui, les polices personnalisées ajoutent des fichiers à charger. Si elles ne sont pas optimisées (formats lourds, trop nombreuses variantes, absence de compression), elles peuvent ralentir votre site. En limitant le nombre de polices, en utilisant WOFF2 et en activant font-display: swap, vous pouvez toutefois conserver une très bonne vitesse de chargement.

Comment choisir une police qui s’intègre bien avec mon thème WordPress ?

Commencez par définir l’ambiance générale de votre site (professionnelle, créative, éditoriale, institutionnelle, etc.). Choisissez ensuite une police lisible pour le texte courant et une policeéventuellement plus marquée pour les titres. Testez plusieurs combinaisons à l’écran, sur mobile et desktop, et vérifiez que la hiérarchie typographique reste claire.

Faut-il privilégier les polices locales ou les services tiers comme Google Fonts ?

Les services externes comme Google Fonts sont simples à utiliser et offrent un large catalogue. Cependant, l’auto-hébergement via @font-face (polices locales) donne plus de contrôle sur la confidentialité, les performances et la disponibilité. Pour beaucoup de sites, une combinaison d’auto-hébergement et de services tiers bien configurés offre un bon compromis.

Est-il nécessaire de déclarer plusieurs formats de fichiers (WOFF2, WOFF, TTF, OTF) ?

En 2025, proposer WOFF2 est généralement suffisant pour la majorité des navigateurs modernes. Ajouter WOFF en complément améliore la compatibilité avec certains environnements plus anciens. TTF et OTF peuventêtre conservés comme base de conversion ou pour des cas particuliers, mais ils ne sont plus indispensables dans la plupart des scénarios web courants.

Que faire si ma police personnalisée ne s’affiche pas sur mon site WordPress ?

Vérifiez le chemin de fichier dans la règle @font-face, assurez-vous que le fichier est présent sur le serveur, contrôlez les permissions de fichiers, videz le cache du navigateur, le cache de votre plugin de cache WordPress et celui de votre CDN le caséchéant. Inspectez enfin le CSS dans l’outil de développement du navigateur pour vous assurer qu’aucune autre règle ne surcharge votre font-family.

Est-ce que l’utilisation de polices personnalisées a un impact sur le SEO ?

Indirectement, oui. Les polices influencent la vitesse de chargement et la lisibilité, deuxéléments importants pour l’expérience utilisateur et les Core Web Vitals, qui sont pris en compte dans le référencement. Un site rapide, lisible et agréable à parcourir a de meilleures chances de bien se positionner qu’un site lent et difficile à lire.

Conclusion

L’utilisation de @font-face dans WordPress est un levier puissant pour personnaliser la typographie de votre site, renforcer votre identité visuelle et améliorer l’expérience de lecture. En combinant des formats modernes comme WOFF2, des règles @font-face bien structurées, un thème enfant correctement configuré et des bonnes pratiques de performance (limitation des variantes, font-display: swap, fallbacks pertinents), vous pouvez profiter de polices sur mesure sans sacrifier la vitesse ni la compatibilité.

Que vous passiez par la Font Library de WordPress, le Customizer, un plugin dédié ou un ajout manuel via CSS, l’essentiel est de garder le contrôle sur le nombre de polices chargées, leur poids et leur impact sur vos visiteurs. Prenez le temps de tester plusieurs combinaisons, d’analyser vos performances et d’ajuster vos choix typographiques en fonction des besoins réels de votre audience.

En appliquant ces principes, vous serez en mesure d’améliorer la performance WordPress tout en offrant une expérience de lecture soignée et professionnelle. N’hésitez pas à expérimenter, à mesurer et à affiner : une typographie bien pensée est un investissement durable dans la qualité globale de votre site.