Pourquoi utiliser des polices variables dans WordPress ?

Petit historique et pourquoi c’est prêt pour la prod

Les variable fonts sont une évolution d’OpenType qui expose des axes comme le poids wght, la largeur wdth ou la taille optique opsz. Au lieu de charger 6 fichiers pour 6 graisses, tu n’en charges qu’un seul et tu choisis la valeur exacte à l’écran. Côté navigateurs, le support est large et stable. Côté WordPress, la Font Library introduite en 6.5 simplifie l’ajout et la gestion des polices directement depuis l’éditeur.

Résultat : moins de friction, plus de maîtrise.

Les bénéfices concrets

• Performance : 1 fichier WOFF2 peut remplacer 4 à 8 fichiers statiques. Moins de requêtes, moins de latence, meilleure stabilité du layout.
• Design : tu règles précisément la graisse, par exemple wght 630 pour un sous-titre, sans créer un nouveau fichier.
• Accessibilité : un léger ajustement de wght ou opsz améliore la lisibilité sur petits écrans et en mode sombre.
• Maintenance : une seule source pour l’équipe éditoriale, fini des @font-face dispersés.
  

Méthode A recommandée :

Font Library + theme.json avec tailles fluides clamp()

Cette méthode est idéale si tu utilises un thème bloc. Elle centralise les polices, expose des presets de tailles fluides à l’éditeur, et évite le “code spaghetti”.

Étape A : Ajoute la police via Font Library

• Apparence → Éditeur → Styles → Gérer les polices → Ajouter.
• Téléverse ton .woff2 variable.
• La famille devient disponible partout dans l’éditeur.
  

Étape B : Définis les tailles clamp() dans theme.json

Colle ce bloc dans ton fichier theme.json. Il crée des presets de tailles fluides que l’équipe pourra sélectionner dans l’éditeur.

{
  "version": 2,
  "settings": {
    "typography": {
      "fluid": true,
      "fontFamilies": [
        {
          "fontFamily": "var(--wp--preset--font-family--ma-police-variable)",
          "name": "Ma Police Variable",
          "slug": "ma-police-variable"
        }
      ],
      "fontSizes": [
        { "slug": "text",   "name": "Texte",   "size": "clamp(1rem, 1rem + 1.2vw, 1.125rem)" },
        { "slug": "h1",     "name": "Titre H1","size": "clamp(2rem, 1.25rem + 3.5vw, 3rem)" },
        { "slug": "h2",     "name": "Titre H2","size": "clamp(1.5rem, 1.1rem + 2.2vw, 2.25rem)" },
        { "slug": "h3",     "name": "Titre H3","size": "clamp(1.25rem, 1rem + 1.5vw, 1.5rem)" },
        { "slug": "button", "name": "Bouton",  "size": "clamp(0.95rem, 0.9rem + 0.6vw, 1.05rem)" }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--ma-police-variable)",
      "lineHeight": 1.55
    },
    "elements": {
      "heading": { "typography": { "lineHeight": 1.2 } }
    }
  }
}

Notes utiles :

• fluid: true active la typographie fluide côté éditeur.
• Les size en clamp() sont passées telles quelles au CSS.

Tu peux définir des poids précis par niveau via styles.blocks ou un petit CSS additionnel si besoin.

Même avec une police variable, le vrai gain se voit surtout quand le chargement est propre : des fichiers au format WOFF2, des variantes maîtrisées, et chargement optimisé. Ce guide sur charger des polices proprement sur WordPress t’aidera à sécuriser le rendu : preload au bon endroit, font-display pour éviter le texte invisible, et subsets si tu veux encore aller plus loin.

Hébergez votre site chez o2switch

Faites comme XT DESIGN WEB, choisissez o2switch. Un hébergeur engagé écologiquement avec 94% d’énergie décarbonnée. Des performances au rendez-vous et un support exeptionnel.

Essayez o2switch

Méthode B : style.css pour thème enfant avec clamp()

Tu es sur un thème classique ou tu préfères un contrôle direct par CSS. Voici un exemple prêt à coller.

/* 1) Déclaration de la variable font */
@font-face{
  font-family:"MaPoliceVariable";
  src:url("assets/fonts/MaPoliceVariable.woff2") format("woff2");
  font-weight:100 900;   /* plage de poids variable */
  font-style:normal;
  font-display:swap;     /* rendu rapide et stable */
}
/* 2) Base typographique + tailles fluides avec clamp() */
:root{
  --font-ui: "MaPoliceVariable", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
html{ font-size: 100%; } /* 1rem = 16px */
body{
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1rem + 1.2vw, 1.125rem);
  font-variation-settings: "wght" 400;
  line-height: 1.55;
}

h1{
  font-size: clamp(2rem, 1.25rem + 3.5vw, 3rem);
  font-variation-settings: "wght" 730;
  line-height: 1.15;
}
h2{
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.25rem);
  font-variation-settings: "wght" 650;
  line-height: 1.2;
}
h3{
  font-size: clamp(1.25rem, 1rem + 1.5vw, 1.5rem);
  font-variation-settings: "wght" 600;
  line-height: 1.25;
}

.button, .wp-element-button{
  font-size: clamp(0.95rem, 0.9rem + 0.6vw, 1.05rem);
  font-variation-settings: "wght" 620;
}

Bonnes pratiques :

• Utilise WOFF2 en priorité.
• Commence sans preload, mesure, puis précharge la police critique si nécessaire.
• Limite à 3 ou 4 tailles presets pour éviter de perdre l’équipe édito.

Vérifie Performance et Accessibilité avec Lighthouse.

Pièges courants et recette express

• Faux gains : si tu remplaçais 1 seule fonte statique, la variable peut être plus lourde. Mesure avant/après.
• Sur-préchargement : un preload de trop ralentit le reste. Ajoute-le seulement pour la police Above The Fold.
• Lisibilité : teste les wght et opsz sur petits écrans et en mode sombre.
  

En conclusion

En 2025, passer aux polices variables sur WordPress est un choix rationnel : moins de fichiers, plus de contrôle et une typo fluide grâce à clamp(). Choisis Font Library + theme.json si tu es en thème bloc et que tu veux un flux no-code. Choisis style.css si tu as un thème classique ou si tu veux un pilotage CSS au cordeau. Dans les deux cas, tu obtiens un site plus rapide, plus cohérent et plus confortable à lire. Ton design respire, ton SEO aussi… et tes visiteurs restent plus longtemps !

Tu veux mettre en place Font Library et des tailles fluides clamp() taillées pour ta marque ? Parlons-en lors d’un appel gratuit