Un client éditorial utilisait une même famille typographique en quatre graisses différentes : régulière, moyenne, semi-grasse et grasse, soit quatre fichiers de police statiques chargés séparément selon le contexte. Le passage à la version variable de cette même famille a permis de ne charger qu’un seul fichier, capable de restituer l’ensemble du spectre de graisses grâce à l’axe variable wght, avec un gain de poids mesurable sur le chargement de la page.
Ce guide couvre la déclaration technique dans theme.json ; il ne traite pas de la gestion des polices via l’interface de la Font Library, un sujet distinct qui répond à un besoin différent — l’ajout et la gestion de polices depuis l’administration plutôt que leur déclaration structurelle dans le thème.
Comprendre l’axe de graisse variable
Une police variable encode plusieurs variations de style (graisse, largeur, parfois inclinaison) dans un unique fichier, via des axes continus plutôt que des fichiers distincts par variante. L’axe le plus courant, wght, couvre typiquement une plage de 100 (fin) à 900 (extra-gras), permettant d’obtenir n’importe quelle graisse intermédiaire sans fichier supplémentaire.
Déclarer la police variable dans theme.json
{
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "Ma Police Variable",
"slug": "principale",
"fontFace": [
{
"fontFamily": "Ma Police Variable",
"fontWeight": "100 900",
"fontStyle": "normal",
"src": [ "file:./assets/fonts/ma-police-variable.woff2" ]
}
]
}
]
}
}
}Le point clé est la syntaxe "fontWeight": "100 900" : contrairement à une police statique où fontWeight reçoit une valeur unique (400, 700), une plage séparée par un espace indique au navigateur que ce fichier couvre tout ce spectre de graisses, et qu’il peut interpoler n’importe quelle valeur intermédiaire à la demande.
Utiliser des graisses intermédiaires précises
Une fois la police déclarée, il devient possible d’utiliser des graisses que les fichiers statiques ne proposaient jamais, comme 550 ou 620, directement dans les styles de blocs ou dans une section style dédiée :
.wp-block-heading {
font-weight: 620;
font-variation-settings: "wght" 620;
}La propriété font-variation-settings reste utile en complément de font-weight pour les navigateurs plus anciens ou pour piloter d’autres axes que la graisse (largeur via wdth, par exemple), quand la police variable en propose. Sur la plupart des navigateurs récents, font-weight seul suffit désormais à interpoler correctement la graisse.
Réduire le poids avec un sous-ensemble de caractères
Une police variable en version complète peut peser plus lourd qu’une seule graisse statique, car elle embarque l’ensemble du spectre. Sur ce projet, le fichier fourni par la fonderie couvrait l’alphabet latin étendu avec des glyphes non utilisés par le site (caractères vietnamiens, certains symboles). Un sous-ensemble ciblé sur le latin de base et les caractères accentués français a réduit le fichier de près de 35 %, sans aucune perte visible pour le contenu réellement publié.
| Configuration | Poids total chargé |
|---|---|
| 4 fichiers statiques (régulier à gras) | 312 Ko |
| 1 fichier variable, jeu de caractères complet | 198 Ko |
| 1 fichier variable, sous-ensemble latin français | 129 Ko |
Un piège rencontré : le rendu en graisse par défaut du navigateur
Sur un premier test, certains titres s’affichaient dans une graisse visiblement différente de celle attendue, sans lien apparent avec la configuration de theme.json. La cause : une règle CSS héritée d’un ancien fichier, qui imposait font-weight: bold sur les titres via un sélecteur générique, une valeur mot-clé qui court-circuitait l’interpolation fine attendue de la police variable. Le correctif a consisté à remplacer cette règle par une valeur numérique explicite cohérente avec les presets du thème.
Vérifiez systématiquement qu’aucune règle CSS historique du thème n’impose
boldounormalen mot-clé sur les éléments concernés par une police variable. Ces valeurs mot-clé restent valides, mais elles annulent tout l’intérêt d’un axe de graisse continu.
En résumé
Une police variable déclarée avec une plage de fontWeight dans theme.json remplace avantageusement plusieurs fichiers statiques, tout en ouvrant l’accès à des graisses intermédiaires impossibles autrement. Le gain de poids réel dépend fortement du sous-ensemble de caractères retenu : sur ce projet, il a fait la différence entre un gain modeste et une réduction de plus d’un tiers du poids total chargé.
