07 ‐ Ajouter des polices

Ajouter des polices au thème

Ce thème propose deux façons de charger des polices web. Les deux passent par src/scss/03-base/_fonts.scss, importé par style.scss et editor.scss, pour que les polices s’appliquent sur le front et dans l’éditeur de blocs.

Après avoir défini les règles @font-face, indiquez la pile utilisée partout dans le thème dans src/scss/01-abstract/_variables.scss via $font-family-primary.

---

Option 1 — Fontsource (paquets npm)

À privilégier lorsque la police est disponible sur Fontsource : les versions sont gérées avec Yarn, et Webpack inclut déjà les fichiers depuis node_modules/@fontsource et @fontsource-variable.

Étapes

1. Installer les paquets (une fois par projet) :

   yarn add @fontsource-utils/scss

   Police « classique » (fichiers par graisse) :

   yarn add @fontsource/<font-name>

   Police variable :

   yarn add @fontsource-variable/<font-name>

2. Déclarer les graisses dans src/scss/03-base/_fonts.scss :

   @use "@fontsource-utils/scss/src/mixins" as fontsource;
   @use "@fontsource/<font-name>/scss/mixins" as MyFont;
   
   @include fontsource.faces($metadata: MyFont.$metadata, $weights: (400, 700));

   Pour une police variable, utilisez $axes à la place de $weights (voir la doc Fontsource faces mixin).

3. Renseigner le nom de famille dans _variables.scss :

   $font-family-primary: "<Font Family Name>", sans-serif;

   Utilisez exactement le nom CSS font-family indiqué pour ce paquet Fontsource.

4. Fallback CLS : pour la police principale, vous pouvez ajouter un @font-face de secours avec métriques ajustées (voir le bloc Poppins-fallback dans _fonts.scss) via un outil du type perfect-ish-font-fallback.

---

Option 2 — Fichiers auto-hébergés (declare-font-face)

Adapté aux fichiers sous licence, sous-ensembles sur mesure, ou polices absentes de Fontsource. Les fichiers se placent dans src/fonts/ ; Webpack les émet vers dist/fonts/ via config/loaders.js.

Étapes

1. Ajouter les fichiers .woff2 dans src/fonts/ (seul le format woff2 est prévu par défaut dans le mixin).

2. Importer le mixin en haut de src/scss/03-base/_fonts.scss (si ce n’est pas déjà fait) :

   @use "../02-tools/m-declare-font-face" as *;

3. Appeler le mixin une fois par graisse / style (chemins relatifs à _fonts.scss ; depuis 03-base, utiliser ../../fonts/ pour pointer vers src/fonts/) :

   @include declare-font-face("My Font", "../../fonts/my-font-regular", 400);
   @include declare-font-face("My Font", "../../fonts/my-font-regular-italic", 400, italic);
   @include declare-font-face("My Font", "../../fonts/my-font-bold", 700);

   Exemple police variable (adapter le format si besoin) :

   @include declare-font-face("My Variable Font", "../../fonts/my-variable-font", 100 950, normal, normal, "woff2-variations");

   Le mixin est défini dans src/scss/02-tools/_m-declare-font-face.scss (font-display: swap, unicode-range optionnel).

4. Définir la pile dans _variables.scss :

   $font-family-primary: "My Font", sans-serif;

5. Recompiler les assets front et éditeur (yarn build ou yarn start) pour que les nouveaux fichiers soient copiés et que les URL soient correctes.

---

Facultatif — theme.json et l’éditeur du site

Si vous activez les familles de polices dans theme.json (settings.typography.fontFamilies), utilisez les mêmes noms de familles CSS que dans $font-family-primary pour garder la cohérence entre l’éditeur et le front.

---

Références dans ce dépôt

Sujet	Emplacement
Point d’entrée des @font-face	src/scss/03-base/_fonts.scss
Pile principale	src/scss/01-abstract/_variables.scss ($font-family-primary)
Mixin auto-hébergé	src/scss/02-tools/_m-declare-font-face.scss
Bundle des polices (Webpack)	config/loaders.js (src/fonts, @fontsource)