Roboto pour les titres, Open Sans pour le corps du texte. La typographie du site ressemble à celle de la moitié des installations WordPress. Le visiteur a remarqué le motif, reconnu la police, et le site a perdu une part de son identité avant même le premier paragraphe.

Une police personnalisée s’intègre à WordPress de deux manières: via une extension en 2 minutes sans écrire une seule ligne de code, ou manuellement avec @font-face pour un contrôle total sur les fichiers. Les deux méthodes fonctionnent de manière fiable, le choix dépend de votre aisance avec le CSS.

Nous allons voir ci-dessous où trouver des polices, comment configurer une extension et comment ajouter @font-face dans un thème enfant. Le code provient d’installations en production: copiez-le, remplacez le nom du fichier, et votre typographie est en place.

💡 Aperçu rapide:

• Téléchargez une police depuis DaFont ou FontSquirrel au format WOFF2 ou TTF: prévoyez au moins trois graisses (normal, gras, italique).
• Installez Use Any Font ou Fonts Plugin, importez le fichier via le panneau d’administration et assignez la police aux éléments. Aucun code requis.
• Ou connectez-la manuellement: créez un dossier fonts dans le thème enfant, importez les fichiers par FTP et ajoutez @font-face dans style.css pour chaque graisse.
• Vérifiez l’affichage dans plusieurs navigateurs et n’installez pas plus de deux polices personnalisées: chaque fichier alourdit la page.

Où trouver des polices et sous quel format

Tout le monde connaît Google Fonts, et c’est précisément pour cela qu’elles sont partout. Si vous cherchez quelque chose de moins répandu, voici trois sources éprouvées.

DaFont propose plus de 3 500 polices avec des catégories allant du comics au vintage. La plupart sont gratuites pour un usage personnel. Pour les projets commerciaux, vérifiez la licence de chaque fichier séparément, elles sont indiquées sur la page de la police.

FontSquirrel se concentre sur les polices gratuites avec licences commerciales. La collection est restreinte, mais chaque police a été vérifiée par des juristes. Le générateur intégré convertit un fichier téléchargé en WOFF et WOFF2 en un clic.

FontSpring vend des polices payantes, mais presque chaque famille propose une ou deux graisses gratuites. Lisez attentivement la licence avant de télécharger: différentes graisses peuvent avoir des conditions différentes.

Règle générale: ne mettez pas plus de deux polices personnalisées sur un site. Une pour les titres, une autre pour le corps du texte, c’est suffisant. Chaque fichier ajoute une requête HTTP et augmente le poids de la page de 30 à 100 Ko.

Téléchargez toutes les graisses en une fois: normal, gras, italique et gras italique. Si le fichier ne contient qu’une seule graisse, le navigateur simulera le gras et l’italique par un épaississement artificiel, ce qui donne un résultat grossier.

Méthode 1: une extension en 2 minutes

Une extension, c’est le chemin le plus simple. Vous l’installez, importez le fichier de police, choisissez où l’appliquer. Aucun code, aucune connexion FTP.

Use Any Font

🔗 Use Any Font sur WordPress.org

🔗 Captures d’écran et démo

Téléversez les polices aux formats TTF, OTF et WOFF, et convertissez-les automatiquement en WOFF2 avec compression Brotli. D’après la page de l’extension sur WordPress.org, la vitesse de chargement s’améliore d’environ 30%. Les polices sont stockées sur votre serveur: conformité RGPD immédiate, sans dépendance à des API externes après la conversion.

Après l’installation, vous obtenez une clé API (la clé gratuite Lite permet une conversion), vous téléversez le fichier et attribuez la police via l’interface visuelle. Vous pouvez l’appliquer aux titres, aux paragraphes ou à des blocs spécifiques directement depuis le panneau d’administration.

Compatible avec Elementor, Divi, WPBakery, Gutenberg: attribuez la police une fois dans l’extension, elle apparaît dans la liste des polices du constructeur.

Remarque: pour plusieurs polices, une clé Premium est nécessaire. Pour un site classique, la version gratuite suffit: une police de marque pour les titres, Google Fonts pour le texte.

Fonts Plugin

🔗 Fonts Plugin sur WordPress.org

🔗 Captures d’écran de l’extension

Anciennement Olympus Google Fonts: renommée, fonctionnalités étendues. D’après la page de l’extension, elle compte plus de 200 000 installations actives et une note de 5 étoiles attribuée par plus de 1 200 utilisateurs. Elle prend en charge Google Fonts, Adobe Fonts (Typekit) et le téléversement de fichiers personnalisés.

La configuration se fait via l’outil de personnalisation: sélectionnez une police, visualisez un aperçu en direct, enregistrez.

La version Pro ajoute l’hébergement local des Google Fonts pour la conformité RGPD, le chargement sélectif des seules graisses nécessaires et le contrôle de la taille, de la couleur et de l’interlignage. La version gratuite suffit pour la plupart des sites.

Extension ou méthode manuelle: quel choix pour quel usage

Une extension l’emporte sur la rapidité: installation en 2 minutes, aucun code requis. Mais vous dépendez des mises à jour de l’extension et de sa compatibilité avec la version de WordPress.

L’installation manuelle via @font-face est plus complexe à mettre en place, mais vous contrôlez chaque octet. Pas d’API tierce, pas de mise à jour qui casse votre typographie.

Si vous travaillez déjà avec un thème enfant, la méthode manuelle s’intégrera naturellement dans votre CSS. Les polices deviennent partie intégrante du thème et y resteront pendant des années.

Méthode 2: installation manuelle via @font-face

La directive @font-face relie les fichiers de polices directement depuis votre serveur. Les formats supportés sont TTF, OTF, WOFF, WOFF2 et SVG. Chaque graisse nécessite un bloc de code distinct.

Mais une fois la configuration terminée, vous oubliez la typographie pour des années: les mises à jour de WordPress et du thème n’affecteront pas les polices, elles résident dans votre thème enfant et se chargent à chaque fois en tant que partie intégrante du CSS.

Avant de commencer, créez un thème enfant: toutes les modifications s’y font, le thème parent reste intouché et se mettra à jour sans perdre vos changements.

Étape 1: créer un dossier pour les polices

Dans le dossier du thème enfant, créez un répertoire fonts. Ajoutez-le via FTP ou le gestionnaire de fichiers de l’hébergement:

1
wp-content/themes/your-child-theme/fonts/

Si votre thème enfant s’appelle twentytwentyfour-child, le chemin sera wp-content/themes/twentytwentyfour-child/fonts/.

Étape 2: téléverser les fichiers de polices sur le serveur

Copiez les fichiers téléchargés dans le dossier fonts via FTP ou le gestionnaire de fichiers de l’hébergement. Pour chaque graisse, un fichier distinct:

1
fonts/WebFont.woff2
2
fonts/WebFont.woff
3
fonts/WebFont-Bold.woff2
4
fonts/WebFont-Bold.woff
5
fonts/WebFont-Italic.woff2
6
fonts/WebFont-Italic.woff

En pratique, les formats WOFF et WOFF2 suffisent: ils couvrent tous les navigateurs modernes et pèsent moins lourd que le TTF. Selon MDN Web Docs, le WOFF2 compresse une police 30% plus efficacement que le WOFF et est supporté par tous les navigateurs depuis 2016.

Le navigateur choisira le format approprié parmi ceux connectés: s’il supporte le WOFF2, il chargera celui-ci, sinon il prendra le WOFF.

Étape 3: ajouter @font-face dans style.css

Ouvrez le style.css du thème enfant et ajoutez le code après l’en-tête du thème (le commentaire avec le nom et la description du thème). Commencez par la graisse normale:

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont.woff2') format('woff2'),
4
         url('fonts/WebFont.woff') format('woff');
5
    font-weight: normal;
6
    font-style: normal;
7
}

font-family, le nom de la police que vous utiliserez en CSS. Nommez-la de façon à ne pas la confondre avec les polices système: pas Arial, mais MaMarqueSans ou TitreDeMarque. src, le chemin vers les fichiers relatif au style.css. L’ordre a son importance: WOFF2 en premier (le plus léger), WOFF en second (solution de repli pour les navigateurs plus anciens).

Étape 4: ajouter l’italique

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Italic.woff2') format('woff2'),
4
         url('fonts/WebFont-Italic.woff') format('woff');
5
    font-weight: normal;
6
    font-style: italic;
7
}

Remarque: font-family est identique, font-weight reste normal, et font-style passe en italique. Le navigateur substituera le bon fichier pour la balise em et la propriété font-style: italic.

Étape 5: ajouter la graisse bold

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Bold.woff2') format('woff2'),
4
         url('fonts/WebFont-Bold.woff') format('woff');
5
    font-weight: bold;
6
    font-style: normal;
7
}

Ici, font-style est de nouveau normal, et font-weight est maintenant bold. Désormais, la balise strong et la propriété font-weight: bold s’afficheront avec votre fichier bold, et non avec un épaississement simulé par le navigateur. La différence est perceptible: une vraie graisse bold est équilibrée par le créateur de la police, la simulation donne un rendu grossier.

Étape 6: bold italique (optionnel)

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-BoldItalic.woff2') format('woff2'),
4
         url('fonts/WebFont-BoldItalic.woff') format('woff');
5
    font-weight: bold;
6
    font-style: italic;
7
}

Quatre graisses couvrent pratiquement tous les besoins typographiques d’un site classique. Si le design ne nécessite pas de bold italique, passez cette étape: le fichier ne se chargera pas tant que le CSS ne demande pas explicitement la combinaison bold + italique.

Étape 7: appliquer la police aux éléments

Après @font-face, ajoutez les règles qui attribuent la police à des éléments spécifiques. Ajoutez dans le style.css du thème enfant:

1
body {
2
    font-family: 'MyWebFont', Arial, sans-serif;
3
}
4
 
5
h1, h2, h3 {
6
    font-family: 'MyWebFont', Georgia, serif;
7
}

La première règle: votre police pour le corps du texte, avec une solution de repli vers Arial système. La seconde: la même police pour les titres, avec une solution de repli vers Georgia.

Si le fichier de police ne se charge pas (serveur hors ligne ou chemin erroné), le site ne se retrouvera pas sans texte: le navigateur affichera Arial ou Georgia. Une police de repli est obligatoire: sans elle, le navigateur utilisera la police système par défaut, généralement Times New Roman, et la typographie partira en morceaux.

C’est fait. Une police personnalisée est connectée sans extensions ni services externes. La typographie réside sur votre serveur et ne sera pas cassée si une API tierce change ses conditions ou tombe en panne.

Vidéo: configuration pas à pas sur un site en production

Regardez comment se déroule l’ensemble du processus sur un vrai site WordPress, du choix d’une police à son application sur les titres:

La vidéo montre les deux méthodes: via une extension et via @font-face. Il est pratique de mettre sur pause et de suivre pas à pas. La vidéo est en anglais, mais le processus est visuellement clair même sans le son.

⁉️🤔 Foire aux questions

Combien de polices personnalisées puis-je ajouter à un site?

Pas plus de deux: une pour les titres, une autre pour le corps du texte. Chaque police comprend plusieurs fichiers de graisse, de 30 à 100 Ko chacun. Deux polices ajouteront un volume notable au chargement de la page. Une troisième dégradera sensiblement la vitesse, en particulier sur les connexions mobiles lentes.

Est-il obligatoire de créer un thème enfant pour @font-face?

Formellement, non: vous pouvez insérer @font-face directement dans le style.css du thème parent. Mais après la prochaine mise à jour du thème, toutes les modifications disparaîtront. Un thème enfant résout ce problème une fois pour toutes. Si vous n'en avez pas encore créé un, notre guide du thème enfant WordPress vous accompagne de l'installation jusqu'au premier résultat.

Quel format de fichier choisir: WOFF, WOFF2 ou TTF?

WOFF2, en priorité. Il compresse une police nettement plus que le WOFF et est pris en charge par tous les navigateurs modernes. WOFF, en solution de repli pour les anciennes versions de navigateurs. Ne connectez le TTF et l'OTF que si la police n'est pas disponible dans les formats web: ils ne sont pas compressés et pèsent deux fois plus lourd. L'ordre dans src est toujours: WOFF2, puis WOFF.

Pourquoi la police ne s'affiche-t-elle pas après l'installation?

Trois causes fréquentes. Premièrement: le chemin vers le fichier dans url() est incorrect, vérifiez que le chemin est construit à partir du style.css, et non de la racine du site. Deuxièmement: le cache du navigateur conserve l'ancien CSS, ouvrez le site en navigation privée ou videz le cache avec Ctrl+F5. Troisièmement: conflit avec un thème qui surcharge font-family avec une priorité plus élevée, vérifiez dans l'inspecteur quel sélecteur CSS est effectivement appliqué au texte.

Dois-je spécifier format() dans src?

Formellement, le navigateur détermine lui-même le format à partir des en-têtes du fichier. Mais un format('woff2') explicite accélère la sélection: le navigateur ne télécharge pas un fichier qu'il ne prend définitivement pas en charge. Spécifiez-le donc toujours. C'est une recommandation de la spécification CSS Fonts Level 4.

Comment vérifier que la police se charge depuis mon serveur et non en externe?

Ouvrez les DevTools (F12), onglet Réseau, filtre Polices, actualisez la page. La liste ne doit contenir que des fichiers provenant de votre domaine. Si vous voyez fonts.googleapis.com ou fonts.gstatic.com, les Google Fonts se chargent en externe. Pour la conformité RGPD, déplacez-les en hébergement local via Fonts Plugin Pro ou téléchargez-les manuellement et connectez-les via @font-face.

Quelle méthode de connexion des polices choisir?

Les deux méthodes fonctionnent de manière fiable. Le choix dépend de ce qui est le plus important pour vous: la rapidité de mise en place ou le contrôle de chaque octet.

Vous installez une police pour la première fois et ne voulez pas toucher au code, prenez Use Any Font. Vous avez téléversé le fichier, l'avez assigné aux titres, c'est fait. La version gratuite suffit pour une police de marque sur les titres.

Vous avez besoin d'accéder au catalogue Google Fonts avec un aperçu en direct directement dans l'outil de personnalisation, prenez Fonts Plugin. La version gratuite suffit pour la plupart des tâches, la version Pro n'est nécessaire que pour l'hébergement local des Google Fonts dans le cadre du RGPD.

Vous travaillez déjà avec un thème enfant et avez l'habitude d'éditer le CSS manuellement, choisissez @font-face. Zéro dépendance externe, contrôle total, et après la configuration, vous ne pensez plus à la typographie pendant des années. Les mises à jour du thème n'affecteront pas les polices, elles vivent dans votre thème enfant en tant que partie intégrante du CSS.

Commencez par une extension: cela prend 2 minutes et ne présente aucun risque. Quelle police utilisez-vous actuellement sur votre site, celle par défaut du thème ou en avez-vous déjà connecté une personnalisée?