# Typographie `theme.fonts` associe un **rôle** à une configuration de police. Chaque clé de rôle génère une propriété CSS personnalisée `--font-{role}` et l'utilitaire `font-{role}` correspondant : les décisions typographiques vivent donc en configuration plutôt que dispersées dans des chaînes `className`. ```yaml theme: fonts: heading: family: Inter fallback: 'system-ui, sans-serif' weights: [600, 700] lineHeight: '1.2' letterSpacing: '-0.02em' body: family: Inter fallback: 'system-ui, sans-serif' weights: [400, 500] size: '16px' lineHeight: '1.6' mono: family: 'JetBrains Mono' fallback: 'ui-monospace, monospace' ``` Les clés de rôle sont alphabétiques et librement choisies. `heading`, `body` et `mono` sont les trois conventionnelles — les composants préconstruits de Sovrium les recherchent — mais un design ayant besoin de `display` ou `caption` n'a qu'à les déclarer. ## Propriétés de police | Propriété | Description | | --------------- | ------------------------------------------------------------------------------------------------ | | `family` | **Obligatoire.** Nom de la famille de police, p. ex. `Inter`, `Roboto`. | | `fallback` | Pile de repli utilisée en attendant le chargement de la famille, ou s'il échoue. | | `weights` | Graisses numériques à charger, de 100 à 900. N'en déclarer que l'utile allège le téléchargement. | | `style` | `normal` (défaut), `italic` ou `oblique`. | | `size` | Taille de base en valeur CSS, p. ex. `16px`, `1rem`. | | `lineHeight` | Multiplicateur ou valeur CSS, p. ex. `1.5`. | | `letterSpacing` | Valeur CSS, p. ex. `0.05em`, `-0.01em`. | | `transform` | `none`, `uppercase`, `lowercase` ou `capitalize`. | | `url` | URL du fichier de police ou de Google Fonts, injectée comme `` dans l'en-tête. | ## Charger une police web Donnez une `url` au rôle et Sovrium injecte le lien de feuille de style pour vous. Rien d'autre n'est requis — ni entrée `` manuelle, ni bloc `@font-face`. ```yaml theme: fonts: body: family: Inter fallback: 'system-ui, sans-serif' weights: [400, 600] url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap' ``` :::callout **Associez toujours `url` à `fallback`.** Une police distante est une requête réseau que le premier rendu n'attend pas. Sans pile de repli, le texte est composé dans la police par défaut du navigateur puis se recompose à l'arrivée du fichier ; avec une pile, la bascule est un changement de caractère, pas un changement de mise en page. ::: Les polices auto-hébergées fonctionnent de la même façon — pointez `url` vers une feuille de style de votre répertoire public. La requête reste ainsi sur votre propre domaine, ce qui compte lorsqu'un CDN de polices tiers n'est pas acceptable au regard de votre posture de confidentialité. ## Dimensionner la base `size` sur le rôle `body` fixe la taille de police de base du document, et chaque utilitaire Tailwind d'espacement et de typographie exprimé en `rem` suit l'échelle. Passer de `16px` à `17px` agrandit proportionnellement toute l'interface — généralement un meilleur premier réflexe que de surcharger des utilitaires typographiques un à un. ## Pages connexes - [Aperçu du thème et couleurs](/fr/docs/theme) — le bloc theme et les jetons de couleur. - [Espacements, rayons et ombres](/fr/docs/theme-spacing) — les autres catégories de jetons. - [Baseline et mode sombre](/fr/docs/theme-dark-mode) — comment une seconde palette s'applique. - [Composants de contenu](/fr/docs/content-components) — le texte que ces rôles mettent en forme. - [Écoconception](/fr/docs/ecoconception) — le coût en empreinte du chargement de polices distantes.