# Servir les polices variables d’un thème depuis le dossier assets

> Réduire la dépendance à un service de polices externe en embarquant directement une police variable dans le thème, déclarée proprement dans theme.json.

- Auteur : WordPress Développement
- Publié le : 2024-02-02
- Mis à jour le : 2024-02-02
- Catégorie : Éditeur de site (FSE)
- URL : https://www.wpmoderne.fr/fse/servir-polices-variables-theme-dossier-assets/

## L’essentiel

- Une seule police variable remplace plusieurs graisses statiques
- fontFace dans theme.json évite d'écrire un @font-face à la main
- Le format woff2 reste le plus léger pour le web

Un thème qui dépend d'un service de polices externe ajoute, à chaque visite, une résolution DNS et une connexion supplémentaires avant même de pouvoir afficher le texte. Embarquer directement la police dans le dossier du thème supprime cette dépendance, et une police variable permet en plus de couvrir plusieurs graisses avec un seul fichier au lieu de plusieurs. Voici comment la mettre en place proprement dans un thème hybride, en s'appuyant sur `theme.json` plutôt que sur un `@font-face` écrit à la main dans une feuille de style séparée.

## Étape 1 : préparer le fichier de police

Le format `woff2` reste le plus adapté pour le web : compression supérieure aux formats plus anciens, et prise en charge large par les navigateurs modernes. Le fichier de police variable est placé dans un dossier dédié du thème, par exemple `assets/fonts/`, aux côtés des autres ressources statiques.

```
mon-theme/
├── assets/
│   └── fonts/
│       └── texte-variable.woff2
├── theme.json
└── style.css
```

## Étape 2 : déclarer la police dans theme.json

> L'essentiel à retenir : Une seule police variable remplace plusieurs graisses statiques ; fontFace dans theme.json évite d'écrire un @font-face à la main ; Le format woff2 reste le plus léger pour le web

Depuis la version 2 du schéma `theme.json`, la clé `settings.typography.fontFamilies` accepte une sous-clé `fontFace` qui décrit directement les fichiers à charger, sans passer par une règle CSS écrite séparément :

```
{
  "version": 2,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Texte Variable",
          "slug": "texte-variable",
          "fontFace": [
            {
              "fontFamily": "Texte Variable",
              "fontWeight": "300 700",
              "fontStyle": "normal",
              "src": [ "file:./assets/fonts/texte-variable.woff2" ]
            }
          ]
        }
      ]
    }
  }
}
```

La plage `"300 700"` indique à WordPress qu'un seul fichier couvre l'ensemble des graisses comprises entre 300 et 700 : c'est le navigateur qui interpole la graisse demandée, sans qu'il soit nécessaire de fournir un fichier distinct pour chaque valeur intermédiaire.

## Étape 3 : vérifier la génération automatique du CSS

WordPress génère automatiquement la règle `@font-face` correspondante et l'injecte dans la feuille de styles globaux du site, sans intervention supplémentaire du thème. Il suffit d'inspecter le code source de la page, ou l'onglet réseau du navigateur, pour confirmer que le fichier `woff2` est bien demandé depuis le dossier du thème et non depuis un service externe.

## Étape 4 : utiliser la police dans les réglages du thème

Une fois la police déclarée, elle apparaît dans le sélecteur de police de l'éditeur au même titre que les polices système. Pour l'imposer comme police par défaut du site, il suffit de référencer son slug dans les styles globaux du même fichier :

```
{
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--texte-variable)"
    }
  }
}
```

## Étape 5 : soigner le chargement pour éviter un effet indésirable

Une police variable reste plus lourde qu'une police statique unique, même si elle en remplace plusieurs. Ajouter `font-display: swap` — pris en charge nativement dans la génération de `@font-face` de WordPress via la clé `fontFace` elle-même si le thème la précise — permet d'afficher immédiatement le texte avec une police de repli, puis de le remplacer sans bloquer l'affichage pendant le téléchargement.

### Vérification finale

- confirmer, dans l'onglet réseau, qu'un seul fichier de police est chargé pour l'ensemble des graisses utilisées sur la page ;
- comparer visuellement le rendu des graisses extrêmes (300 et 700) pour s'assurer que l'interpolation du navigateur reste lisible sur le contenu réel du site ;
- vérifier la licence du fichier de police embarqué : contrairement à un service tiers qui gère parfois les droits d'usage web à part, l'embarquement direct impose de vérifier soi-même que la licence couvre bien cet usage.

> Nous embarquons systématiquement les polices dans le thème plutôt que de dépendre d'un service externe, sauf demande explicite du client : la charge de vérification de licence est largement compensée par le contrôle total sur le chargement et l'absence de connexion tierce.

## Ce qu'il faut retenir

Servir une police variable depuis le dossier du thème, en la déclarant proprement dans `theme.json`, réduit le nombre de fichiers à gérer tout en supprimant une dépendance réseau externe. La méthode demande un peu plus de rigueur au moment de la préparation du fichier, mais elle rend le thème entièrement autonome sur ce point, ce qui simplifie aussi bien la performance que la portabilité du projet.