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.

app.yaml

theme:
  fonts:
    heading:
      family: Inter
      fallback: 'system-ui, sans-serif'
      letterSpacing: '-0.02em'
    body:
      family: Inter
      fallback: 'system-ui, sans-serif'
    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.

Les tailles et l'interlignage ne vivent pas ici. theme.fonts répond à la question quel caractère ; l'échelle des tailles — la taille d'un h2 et l'interlignage qui l'accompagne — c'est design.typeScale. Les champs size, lineHeight et weights de cette page sont remplacés et n'atteignent rien : voir Ce qui n'atteint plus le navigateur ci-dessous.

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.
`style`	`normal` (défaut), `italic` ou `oblique`.
`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 `<link>` dans l'en-tête.
`weights`	Remplacé. Voir ci-dessous.
`size`	Remplacé. Voir ci-dessous.
`lineHeight`	Remplacé. Voir ci-dessous.

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 <head> manuelle, ni bloc @font-face.

app.yaml

theme:
  fonts:
    body:
      family: Inter
      fallback: 'system-ui, sans-serif'
      url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'

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é.

Ce qui n'atteint plus le navigateur

Trois des champs ci-dessus passent la validation puis n'atteignent rien. Ils sont documentés comme remplacés plutôt que supprimés, parce qu'ils continuent d'être décodés — mais en déclarer un n'a aucun effet sur le rendu.

Champ	Ce qui se passe réellement
`lineHeight`	Rien du tout. Aucune propriété CSS personnalisée n'est émise pour ce champ.
`size`	N'atteint que l'ancien moteur de rendu de section `hero`, sous forme de taille en ligne. Ce champ ne devient jamais une variable CSS et ne fixe pas la taille de police de base du document.
`weights`	Seule la première entrée est lue, et uniquement par ce même moteur. Ce champ n'atteint jamais une règle `@font-face` : `weights: [300, 400, 700]` ne charge donc aucun fichier de police supplémentaire.

Déclarez plutôt les tailles, l'interlignage et la graisse dans design.typeScale, où chaque niveau émet une véritable propriété personnalisée et un utilitaire text-{niveau} utilisable :

app.yaml

design:
  theme:
    fonts:
      body:
        family: Inter
        fallback: 'system-ui, sans-serif'
  typeScale:
    body:
      size: '1rem'
      lineHeight: 1.6
      weight: 400
      font: body

Pour charger plusieurs graisses d'une police, demandez-les dans l'url — une feuille de style Google Fonts accepte wght@400;600 — ou pointez url vers une feuille auto-hébergée déclarant les règles @font-face nécessaires.

sovrium validate affiche un avis Superseded: nommant chaque chemin déclaré, et se termine avec le code 0. Ces trois champs seront retirés à la prochaine version majeure, en même temps que l'alias theme de premier niveau.

Pages connexes

Échelle typographique — les tailles, l'interlignage et les graisses auxquels ces rôles sont composés.
Système de design — la clé design dans laquelle theme vit désormais.
Aperçu du thème et couleurs — le bloc theme et les jetons de couleur.
Espacements, rayons et ombres — les autres catégories de jetons.
Baseline et mode sombre — comment une seconde palette s'applique.
Composants de contenu — le texte que ces rôles mettent en forme.
Écoconception — le coût en empreinte du chargement de polices distantes.

Dernière mise à jour 1 septembre 2026

← PrécédentThème et couleurs Suivant →Espacements et surfaces

Modifier cette page Signaler un problème

Cette documentation a été rédigée avec de l'IA : des erreurs ou du contenu obsolète sont donc possibles. Sovrium est en bêta. Les contributions et corrections sont les bienvenues.