Ajouter une police WordPress - Guide performance et design

Ajouter une nouvelle police sur WordPress change plus que l’apparence: cela influence la lisibilité, l’identité visuelle et, si c’est mal fait, la vitesse de chargement. Je vais aller droit au but: quelle méthode utiliser selon votre thème, comment intégrer la typographie proprement dans l’éditeur ou dans un thème classique, et quels réglages garder pour éviter les mauvaises surprises sur mobile. Le vrai enjeu n’est pas seulement de mettre une belle police, mais de la rendre stable, rapide et simple à maintenir.

Choisir la bonne méthode selon votre thème

La première question n’est pas quelle police choisir, mais où WordPress doit la gérer. Si je fais ce tri dès le départ, j’évite les doublons entre l’éditeur, le thème et le CSS additionnel. La bonne méthode dépend surtout du type de thème, du niveau de liberté voulu et du fait que la police soit permanente ou simplement testée pour une campagne.

Si votre site est déjà en production, je commence presque toujours par vérifier si le thème sait déjà gérer la typographie nativement. C’est cette voie-là qui vieillit le mieux, et c’est elle qui me sert de base avant d’éventuellement ajouter du code.

Ajouter une police avec l’éditeur de site et theme.json

1. Ouvrez Apparence > Éditeur, puis allez dans Styles > Typographie.
2. Ajoutez ou importez la famille de police via la bibliothèque intégrée si votre installation l’affiche.
3. Choisissez uniquement les variantes utiles, par exemple le régulier et le gras.
4. Déclarez la famille dans theme.json si vous construisez ou contrôlez le thème.
5. Attribuez la police au texte global, puis seulement ensuite à des blocs précis si besoin.

Quand je prépare un thème, je nomme les slugs de façon sémantique, par exemple texte ou accent, au lieu de reprendre le nom exact de la police. C’est plus souple si la charte change un jour, et WordPress génère alors une variable CSS réutilisable dans tout le site.

{
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "name": "Texte",
          "slug": "texte",
          "fontFamily": "Inter, system-ui, sans-serif",
          "fontFace": [
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "400",
              "src": ["file:./assets/fonts/inter-regular.woff2"]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "700",
              "src": ["file:./assets/fonts/inter-bold.woff2"]
            }
          ]
        }
      ]
    }
  }
}

Le point important ici, c’est que fontFace sert à mapper les fichiers de police vers les règles @font-face utilisées par WordPress. Si vous ne travaillez qu’avec une police système, vous pouvez vous contenter d’une simple pile de familles sans même charger de fichier externe. Si cette voie n’existe pas dans votre thème, il reste le chargement manuel sur un thème classique.

Charger une police manuellement sur un thème classique

Sur un thème classique, je passe par un thème enfant. Modifier le thème parent fonctionnerait à court terme, mais la prochaine mise à jour effacerait mes réglages et je me retrouverais avec un site incohérent. Le chargement propre passe ensuite par wp_enqueue_scripts, le hook prévu pour les styles du front-end, puis par un fichier CSS dédié aux polices.

1. Créez ou activez un thème enfant.
2. Placez vos fichiers dans un dossier clair, par exemple /assets/fonts/.
3. Chargez un fichier CSS dédié avec wp_enqueue_scripts.
4. Déclarez la police via @font-face, puis appliquez-la aux bons éléments.
5. Gardez une pile de secours cohérente pour le texte si la webfont tarde à charger.

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'theme-fonts',
        get_stylesheet_directory_uri() . '/assets/css/fonts.css',
        array(),
        null
    );
} );

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, sans-serif;
}

Si vous devez absolument passer par une source externe, ajoutez au moins display=swap à l’URL de chargement pour éviter un texte invisible pendant l’attente. En production, je préfère toutefois l’hébergement local, parce qu’il me donne plus de contrôle sur le poids, le cache et la pérennité du site. La mécanique est simple, mais la vraie différence se joue sur le poids des fichiers et le nombre de variantes chargées.

Éviter les erreurs qui dégradent la performance

C’est ici que beaucoup de sites perdent ce qu’ils gagnaient en design. Une police peut être superbe sur la maquette et pénible dans le navigateur si elle est trop lourde, si elle charge trop de variantes ou si elle arrive trop tard. Les deux symptômes les plus courants sont le FOIT, quand le texte reste invisible pendant le chargement, et le FOUT, quand une police de secours s’affiche d’abord puis bascule ensuite vers la webfont.

Comme le rappelle web.dev, le WOFF2 compresse environ 30 % mieux que le WOFF, ce qui en fait le point de départ logique pour un chargement local. Si vous avez un jeu de glyphes très large, je regarde aussi le sous-ensemble typographique, mais seulement quand le gain est réel. Je vérifie enfin le rendu sur mobile, parce qu’une police qui tient bien sur desktop peut devenir trop serrée ou trop bruyante sur un écran étroit.

Une configuration légère et propre vaut mieux qu’une bibliothèque de variantes que personne n’utilisera vraiment.

Le réglage que je garderais en production

• Une police principale pour le corps du texte, lisible et neutre.
• Une police d’accent éventuelle pour les titres ou les éléments de marque, seulement si elle apporte un vrai gain visuel.
• WOFF2 local, avec font-display: swap et, au besoin, une seule graisse préchargée.
• Gestion globale dans theme.json ou dans la Font Library, pas dans des pages isolées difficiles à maintenir.
• Vérification finale sur la page d’accueil, un article long et une page de conversion pour voir les effets réels du changement.

Si je devais résumer ma méthode de travail, je choisis la voie native dès qu’elle existe, je protège les thèmes classiques avec un thème enfant et je limite les variantes au strict nécessaire. C’est ce qui donne une typographie nette aujourd’hui et une maintenance tranquille demain.