Tuto : Appliquer la police officielle "Marianne" (DSFR) et personnaliser vos textes sur un formulaire Grist

Ressources et astuces
1

Capture d’écran 2026-07-24 101959
Capture d’écran 2026-07-24 101959653×785 57.7 KB

Bonjour à toutes et tous,

Dans la continuité du tutoriel sur le logo, voici comment adapter le style de vos textes sur les formulaires Grist pour les aligner sur la charte graphique de l’État : la police Marianne (Système de Design de l’État - DSFR).

Ce guide explique également comment régler facilement la taille, l’épaisseur (la graisse) et les marges de chaque section, sans avoir besoin de connaissances en programmation.

:magnifying_glass_tilted_left: Pourquoi cette méthode ?

Dans les formulaires Grist, pour des raisons de sécurité, chaque bloc de texte ou section est isolé. La solution la plus fiable pour forcer l’affichage de la police Marianne consiste à appliquer un petit bloc de style dans chaque section de texte que vous créez.

:hammer_and_wrench: Le principe : Encadrer votre texte avec le code

Lorsque vous ajoutez une section de texte HTML dans votre formulaire Grist, il vous suffit de recopier la structure suivante et de remplacer VOTRE TEXTE ICI par votre contenu :

HTML

<div style="font-family: 'Marianne', Arial, sans-serif; margin: 30px 40px 10px 40px;">
  <style>
    @import url('https://cdn.jsdelivr.net/gh/systeme-de-design-gouv-fr/dsfr@v1.9.3/dist/fonts/fonts.css');
    * { 
      font-family: 'Marianne', Arial, sans-serif !important; 
      font-weight: 650; 
      font-size: 24px; 
    }
    strong { font-weight: 800 !important; }
  </style>

  VOTRE TEXTE ICI

</div>

:control_knobs: Comment personnaliser le rendu selon vos besoins ?

Vous pouvez ajuster les paramètres de la section <style> en modifiant simplement quelques chiffres :

1. La taille du texte (font-size)

  • Titre principal (H1) : font-size: 26px; ou 28px;

  • Titre de section (H2) : font-size: 22px;

  • Paragraphe / Texte d’information : font-size: 16px; ou 18px;

2. L’épaisseur / Le gras (font-weight)

  • Texte normal (Regular) : 400

  • Texte semi-gras (Medium / SemiBold) : 600 ou 650

  • Texte très gras (Bold) : 700

  • Texte extra gras (ExtraBold) : 800

3. Les marges latérales et verticales (margin)

Dans la toute première ligne <div style="... margin: 30px 40px 10px 40px;">, les chiffres correspondent à :

:backhand_index_pointing_right: Haut (30px) | Droite (40px) | Bas (10px) | Gauche (40px).

:light_bulb: 3 Astuces bien pratiques à intégrer dans votre texte :

  1. Aller à la ligne : Écrivez <br> là où vous voulez couper la ligne (ou <br><br> pour un saut de paragraphe).

  2. Mettre en gras une seule phrase : Entourez la phrase à faire ressortir avec <strong> et </strong>.

    Exemple : Ceci est normal. <strong>Cette phrase sera en Marianne Bold.</strong>

  3. Ajouter des émojis : Copiez-collez vos émojis préférés directement dans le texte (sur Windows : touches Windows + ;).

N’hésitez pas à poser vos questions ou à partager vos exemples de formulaires en retour !

1 « J'aime »