Comment modifier sa "font" ou police d’écriture dans WordPress ?

La police, c’est souvent le dernier truc qu’on règle sur un site. Et pourtant, c’est parfois ce qui fait toute la différence entre un site qui inspire confiance et un site qui ressemble à tous les autres. J’ai vu des sites techniquement parfaits gâchés par une police mal choisie. Et des sites visuellement moyens sauvés par une typo soignée.

Cet article a été publié pour la première fois en 2016. À l’époque, Typekit existait encore, on chargeait 5 formats de polices différents, et modifier header.php était la norme. Dix ans plus tard, tout ça a changé. On fait le tour complet des méthodes qui fonctionnent en 2026.

Où trouver une police originale en 2026

Avant de parler technique, il faut trouver la bonne police. Quelques sources que j’utilise régulièrement :

Google Fonts reste la référence gratuite. Plus de 1 500 familles de polices, toutes libres d’utilisation commerciale. L’interface a été entièrement repensée en 2022 — vous pouvez maintenant filtrer par largeur, épaisseur, style d’écriture.

Et les variable fonts sont de plus en plus présentes dans la bibliothèque.

Adobe Fonts (anciennement Typekit — oui, ça n’existe plus sous ce nom depuis 2018) propose un catalogue premium accessible avec un abonnement Creative Cloud. Si vous avez déjà Photoshop ou Illustrator, vous l’avez inclus.

FontSquirrel et DaFont proposent des polices gratuites, mais lisez attentivement les licences. Beaucoup sont gratuites pour un usage personnel uniquement. Pas pour un site commercial.

MyFonts et Creative Market proposent des polices premium. Comptez entre 20 et 100€ pour une famille complète.

Si vous cherchez quelque chose de vraiment unique qui ne se retrouve pas sur tous les sites, c’est là qu’il faut aller.

Un point important : vérifiez toujours que la licence autorise l’utilisation web (webfont). Certaines polices sont vendues uniquement pour l’impression.

Les 4 méthodes pour changer la police dans WordPress

L’ordre dans lequel je présente ces méthodes est intentionnel. En 2026, la méthode #1 (FSE natif) est celle que vous devriez utiliser si votre thème le supporte. Les autres restent valides selon le contexte.

Méthode 1 : le Full Site Editing (FSE) — la voie royale en 2026

Si vous utilisez un thème de blocs comme Twenty Twenty-Three, Twenty Twenty-Four, Astra avec FSE activé, ou n’importe quel thème compatible FSE, vous n’avez besoin de toucher à aucun fichier. Tout se fait dans l’interface WordPress.

Allez dans Apparence > Éditeur, puis dans le panneau latéral cliquez sur Styles (l’icône cercle bicolore en haut à droite). Vous verrez les options de typographie globales du site. Vous pouvez changer la police des titres et du corps de texte en quelques clics.

Si vous voulez aller plus loin, le fichier theme.json à la racine de votre thème (enfant) est l’endroit où tout se configure :

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "'Inter Tight', sans-serif",
          "name": "Inter Tight",
          "slug": "inter-tight",
          "fontFace": [
            {
              "fontFamily": "Inter Tight",
              "fontWeight": "400 700",
              "fontStyle": "normal",
              "fontStretch": "normal",
              "src": [
                "file:./fonts/inter-tight.woff2"
              ]
            }
          ]
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--inter-tight)"
    }
  }
}

Cette approche est propre parce que WordPress gère lui-même le chargement de la police avec les bonnes optimisations. Pas besoin d’écrire du PHP. Pas besoin de modifier functions.php.

Le fichier .woff2 de la police doit être placé dans un dossier fonts/ à la racine de votre thème enfant. Un seul format suffit — en 2026, tous les navigateurs qui comptent supportent woff2.

Méthode 2 : Google Fonts via wp_enqueue_style() — pour les thèmes classiques

Si vous utilisez un thème classique (Astra sans FSE, OceanWP, GeneratePress, un thème custom…), la méthode correcte en 2026 pour charger Google Fonts n’est plus de modifier header.php. C’est d’utiliser wp_enqueue_style() dans votre thème enfant.

Ouvrez le fichier functions.php de votre thème enfant (pas du thème parent — voir notre article sur functions.php) et ajoutez :

function wpf_enqueue_google_fonts() {
    wp_enqueue_style(
        'google-fonts-inter',
        'https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600;700&display=swap',
        array(),
        null
    );
}
add_action( 'wp_enqueue_scripts', 'wpf_enqueue_google_fonts' );

Puis dans le fichier style.css de votre thème enfant, appliquez la police :

body {
    font-family: 'Inter Tight', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
}

Pourquoi wp_enqueue_style() et pas une balise <link> dans header.php ? Parce que WordPress peut alors gérer les dépendances, éviter les chargements en double si deux plugins chargent la même font, et appliquer correctement les filtres de performance. Modifier header.php directement, c’était la méthode de 2014. On ne fait plus ça.

Une chose que j’ajouterais toujours côté performance : un preconnect vers les serveurs Google Fonts. Dans le même functions.php :

function wpf_preconnect_google_fonts() {
    echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . "
";
    echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' . "
";
}
add_action( 'wp_head', 'wpf_preconnect_google_fonts', 1 );

Ce preconnect dit au navigateur d’établir la connexion vers les serveurs Google dès le début du chargement de la page, avant même que le CSS soit parsé. Sur une connexion lente, ça peut faire gagner 100 à 300ms.

Autre option de plus en plus populaire : héberger soi-même les polices Google Fonts. Vous téléchargez les fichiers woff2 directement, vous les mettez dans votre thème, et vous les chargez en local. Avantage : aucune dépendance vers un serveur externe, meilleures performances, et conformité RGPD (pas de transfert de données vers Google).

L’outil google-webfonts-helper génère les fichiers et le code CSS prêts à l’emploi.

Méthode 3 : @font-face avec vos propres fichiers — la méthode manuelle modernisée

Vous avez acheté une police sur Creative Market ou Adobe Fonts et vous voulez l’héberger vous-même. C’est la méthode @font-face. Elle n’a pas changé dans son principe, mais les détails techniques, eux, ont bien évolué depuis 2016.

Étape 1 : rassembler les bons fichiers

En 2016, j’écrivais qu’il fallait 5 formats différents (.eot, .svg, .ttf, .woff, .woff2). C’est fini. En 2026, vous n’avez besoin que de :

• .woff2 — format moderne, compression Brotli intégrée, supporté par tous les navigateurs depuis 2015
• .woff — fallback pour les rares navigateurs anciens

Le format .eot (pour IE6-8) est mort avec IE. Le format .svg était une astuce pour iOS 4 — une époque révolue. Le format .ttf était utilisé pour Android 2.x.

Si votre police ne vient qu’en .ttf, convertissez-la en woff2 via le générateur de FontSquirrel ou via l’outil en ligne CloudConvert.

Étape 2 : créer le thème enfant et uploader les fichiers

Si vous n’avez pas encore de thème enfant, lisez d’abord notre tutoriel sur les thèmes enfants WordPress. C’est la base pour ne pas perdre vos modifications à chaque mise à jour du thème parent.

Créez un dossier fonts/ dans votre thème enfant et uploadez-y les fichiers .woff2 et .woff via FTP (ou via le gestionnaire de fichiers de votre hébergeur).

Étape 3 : déclarer la police dans style.css

Ajoutez ceci au début du fichier style.css de votre thème enfant :

@font-face {
    font-family: 'MaPolice';
    src: url('fonts/mapolice.woff2') format('woff2'),
         url('fonts/mapolice.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

La propriété font-display: swap est vraiment importante. Sans elle, le navigateur peut bloquer l’affichage du texte le temps de charger la police (FOIT — Flash Of Invisible Text). Avec swap, le texte s’affiche immédiatement avec une police système, puis est remplacé par votre police custom une fois chargée.

Google PageSpeed Insights le signale systématiquement quand c’est absent. Et ça impacte directement votre score LCP.

Étape 4 : appliquer la police

body {
    font-family: 'MaPolice', Georgia, serif;
}

h1, h2, h3 {
    font-family: 'MaPolice', Arial, sans-serif;
    font-weight: 700;
}

Toujours déclarer une ou deux polices de fallback après la vôtre. Si le fichier ne se charge pas pour une raison quelconque, votre site reste lisible.

Les variable fonts : une révolution discrète

Une variable font est un fichier unique qui contient toutes les variations d’une famille (maigre, normal, gras, italique…). Traditionnellement, si vous vouliez 5 graisses différentes, vous chargiez 5 fichiers. Avec une variable font, c’est un seul fichier — souvent plus léger que les 5 fichiers combinés.

@font-face {
    font-family: 'InterVariable';
    src: url('fonts/inter-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: oblique 0deg 10deg;
    font-display: swap;
}

h1 {
    font-family: 'InterVariable', sans-serif;
    font-weight: 750; /* Valeur impossible avec une font classique */
}

p {
    font-family: 'InterVariable', sans-serif;
    font-weight: 380;
}

Inter, Roboto Flex, Source Serif 4, Nunito — beaucoup de polices populaires existent en version variable. Cherchez l’indication "Variable" sur Google Fonts.

Méthode 4 : le plugin Use Any Font

Je reste honnête : ce n’est pas ma méthode préférée. Mais elle existe, elle fonctionne, et elle correspond à un besoin réel pour ceux qui ne veulent pas toucher au code.

Le plugin Use Any Font est toujours disponible sur le répertoire officiel WordPress, compatible avec WordPress 6.9. Le principe : vous uploadez votre fichier de police directement dans WordPress (sans passer par FTP), et le plugin gère la conversion et l’injection du CSS automatiquement.

Ce qui a changé depuis 2016 : la version gratuite est plus limitée qu’avant. Pour utiliser vos propres polices (au-delà des polices de base incluses), vous avez besoin d’une API key. La version payante coûte autour de 25$. Pour un usage ponctuel sur un seul site, ça reste raisonnable.

L’interface est simple : Réglages > Use Any Font > Upload Font. Vous sélectionnez votre fichier, le plugin le convertit en woff2, et vous choisissez sur quels éléments appliquer la police via un sélecteur CSS.

Là où ça devient compliqué : si vous désinstallez le plugin un jour, toutes vos polices custom disparaissent. Avec les méthodes 1 à 3, vos fichiers restent dans votre thème. L’indépendance vis-à-vis des plugins, c’est toujours mieux sur le long terme.

Performance des polices : ce que beaucoup ignorent

Les polices peuvent sérieusement impacter vos Core Web Vitals. Plus précisément, elles affectent le LCP (Largest Contentful Paint) et le CLS (Cumulative Layout Shift). Quelques règles pratiques :

font-display:swap — toujours

Déjà mentionné, mais ça vaut la peine d’insister. Google PageSpeed Insights et Lighthouse signalent systématiquement les polices chargées sans font-display:swap comme un problème de performance. Avec cette propriété, votre texte est visible immédiatement — même avec une police de remplacement — ce qui améliore le LCP.

Précharger la police principale

Pour la police qui s’applique au texte principal de la page (body), vous pouvez aller encore plus loin avec une balise <link rel="preload"> :

function wpf_preload_main_font() {
    echo '<link rel="preload" href="' . get_stylesheet_directory_uri() . '/fonts/mapolice.woff2" as="font" type="font/woff2" crossorigin>' . "
";
}
add_action( 'wp_head', 'wpf_preload_main_font', 1 );

Le preload indique au navigateur de télécharger ce fichier en priorité maximale, avant même que le CSS soit traité. Résultat : la police est prête quand elle est demandée, pas de texte invisible, pas de layout shift.

Attention à ne pas précharger 4 ou 5 polices d’un coup. L’effet se retourne contre vous : vous saturez la bande passante initiale. Préchargez uniquement la police principale utilisée au-dessus de la ligne de flottaison.

Limiter le nombre de graisses chargées

Chaque graisse (400, 500, 600, 700…) est un fichier séparé pour les polices classiques. J’ai vu des sites charger 8 graisses de Google Fonts "au cas où". Ça représente plusieurs centaines de Ko supplémentaires.

Choisissez 2 ou 3 graisses maximum. Sur wpformation.com, on charge 400 (texte courant) et 700 (titres). Rien d’autre. Le rendu visuel est identique à 99% des visiteurs, et la page charge nettement plus vite.

Héberger en local ou utiliser Google ?

Héberger vos polices sur votre propre serveur présente plusieurs avantages concrets :

• Pas de requête externe vers Google (conformité RGPD)
• Chargement depuis le même domaine = pas de coût DNS supplémentaire
• Contrôle total des en-têtes cache (vous pouvez définir un cache très long)
• Indépendance vis-à-vis de Google (si Google Fonts tombe en panne…)

Inconvénient théorique : Google Fonts était censé être plus rapide grâce au cache partagé entre les sites. Ce n’est plus vrai depuis 2020 — les navigateurs modernes n’autorisent plus le cache cross-origin. Chaque site charge maintenant sa propre copie de la police, quelle que soit la source.

Autrement dit : il n’y a plus de raison de performance pour préférer Google Fonts à un hébergement local. C’est une question de commodité et de préférence.

Quelle méthode choisir selon votre situation ?

Voici comment je raisonne selon les cas :

Vous utilisez un thème de blocs (FSE) ? Utilisez la méthode 1. C’est le plus propre, le mieux intégré, et vous n’avez pas besoin de PHP.

Vous utilisez Google Fonts sur un thème classique ? Méthode 2 avec wp_enqueue_style(). Si vous voulez aller plus loin, hébergez les fichiers en local.

Vous avez une police custom achetée ? Méthode 3 avec @font-face et seulement les formats .woff2 et .woff. N’oubliez pas font-display:swap.

Vous ne voulez pas toucher au code ? Méthode 4 avec Use Any Font. Ça fonctionne, c’est juste moins flexible sur le long terme.

Vous utilisez Astra ou un thème avec Customizer ? Avant de passer en mode développeur, vérifiez que le Customizer (Apparence > Personnaliser) ne propose pas déjà une option de police. Astra Pro, par exemple, intègre directement Google Fonts dans ses réglages typographiques. Inutile d’ajouter du code si c’est déjà prévu.

Erreurs fréquentes à éviter

Après avoir vu des centaines de sites WordPress, voici les erreurs que je rencontre encore régulièrement en 2026 :

Modifier header.php directement

C’est la méthode décrite dans l’article original de 2016. Elle fonctionnait, mais elle posait deux problèmes : la modification était écrasée à chaque mise à jour du thème, et elle ne passait pas par le système d’enqueue de WordPress. N’utilisez plus jamais cette approche.

Charger des polices sans thème enfant

Modifier style.css ou functions.php directement dans le thème parent, c’est la garantie de tout perdre à la prochaine mise à jour. Créez toujours un thème enfant avant de toucher quoi que ce soit. C’est expliqué en détail dans notre tutoriel dédié. Et si vous avez besoin d’aller au-delà des polices, notre guide complet pour personnaliser le CSS de WordPress couvre toutes les approches.

Oublier font-display:swap

Ça coûte une ligne de CSS et ça peut faire passer votre score Lighthouse de 85 à 95. Ajoutez-le systématiquement à tous vos @font-face.

Charger trop de graisses

Voir plus haut. Deux ou trois graisses maximum. Toujours.

Inclure encore les formats .eot et .svg

Si vous copiez-collez du vieux code trouvé sur le web, vous verrez encore des @font-face avec 5 formats. Les formats .eot (Internet Explorer 8 et antérieur) et .svg (iOS 4 et antérieur) sont à supprimer. Ils ne servent plus à rien et alourdissent inutilement votre CSS.

Utiliser !important partout

J’écrivais en 2016 que !important n’était pas obligatoire, mais je le mettais quand même dans mes exemples. Mauvaise pratique. Si vous devez utiliser !important pour qu’une police soit prise en compte, c’est qu’il y a un problème de spécificité CSS à régler proprement. Cherchez la source du conflit plutôt que de masquer le problème.

FAQ — Questions fréquentes

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

body { font-family: 'PoliceCorps', sans-serif; }

h1, h2, h3 { font-family: 'PoliceTitres', serif; }

Pour aller plus loin

La typographie est un des aspects les plus visibles d’un site, et pourtant souvent sous-estimé techniquement. Quelques ressources complémentaires :

• Créer un thème enfant WordPress — indispensable avant de modifier quoi que ce soit
• Comprendre wp-config.php et functions.php — pour comprendre où mettre votre code
• Snippets WordPress utiles — d’autres exemples de personnalisations via functions.php
• Installer WordPress — si vous démarrez un projet de zéro

Une dernière chose. La meilleure police, c’est celle qui se lit bien. Pas la plus originale, pas la plus chère. Si vos visiteurs ne lisent pas vos articles parce que la police est illisible sur mobile, ou parce que le chargement ralentit la page, vous avez un problème. La forme au service du fond, pas l’inverse.