Utiliser vos polices de marque sur les pages du builder.

Apprendre DXPR BuilderGérer le siteAux couleurs de votre marque

DXPR Builder n’a aucun réglage de police à lui : le texte des pages du builder utilise les polices de votre thème. Pour les changer, vous chargez une police web dans le thème et pointez le CSS du thème vers elle. À la fin, chaque page du builder montre votre police de marque, dans l’éditeur et pour les visiteurs. Si votre site tourne sous DXPR Theme, choisissez plutôt les polices dans ses réglages de thème.

Avant de commencer

  • Il faut l’accès aux fichiers de votre thème ; utilisez un thème personnalisé ou un sous-thème.
  • Vérifiez que la licence de la police permet l’usage sur un site web.
  • Les étapes utilisent la bibliothèque global-styling et css/custom.css de CSS personnalisé.

Configuration

  1. Ajoutez la feuille de style de la police à la bibliothèque dans mytheme.libraries.yml. Pour une police Google :

    global-styling:
  css:
    theme:
      'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap': { type: external }
      css/custom.css: {}

  2. Définissez la police dans css/custom.css :

    body {
  font-family: 'Inter', sans-serif;
}

  3. Videz les caches sous Configuration > Development > Performance (/admin/config/development/performance).

  4. Ouvrez une page dans le builder et regardez un élément Text.

Héberger la police vous-même

Une police auto-hébergée évite une requête vers un tiers, ce qui peut compter pour les règles de confidentialité.

  1. Téléchargez la police en format WOFF2 et placez les fichiers dans le dossier fonts/ du thème.

  2. Déclarez chaque graisse dans css/custom.css, au-dessus de la règle de l’étape 2 :

    @font-face {
  font-family: 'BrandFont';
  src: url('../fonts/brandfont.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

  3. Utilisez 'BrandFont' dans vos règles font-family, retirez la ligne Google de la bibliothèque et videz les caches.

Ce que vous voyez

Le texte de chaque élément du builder utilise la nouvelle police, en mode modification et sur la page publiée. Le panneau Style de chaque élément règle toujours taille et couleur ; voir Changer la taille et la couleur du texte.

Le bouton Font family de l’éditeur de texte est désactivé par défaut. Il liste les polices web standard de CKEditor, pas les vôtres, donc gardez-le désactivé pour garder les contributeurs dans la marque.

DXPR Theme

DXPR Theme a ses propres réglages de police. Accédez à Appearance, ouvrez les réglages de DXPR Theme (/admin/appearance/settings/dxpr_theme) et déployez Fonts. Il définit Base Font, Headings, Navigation, Site Name et Blockquote séparément, donc aucun CSS requis pour eux.

Si vous ne voyez pas la police

  • Le texte montre toujours l’ancienne police. La bibliothèque n’est pas chargée, ou le cache garde l’ancien CSS. Vérifiez que mytheme.info.yml liste la bibliothèque, puis videz les caches sous /admin/config/development/performance.
  • Des titres ou des encadrés gardent une autre police. Une règle du thème pour cet élément est plus spécifique que body. Inspectez le texte dans le navigateur et ajoutez son sélecteur à votre règle.
  • Un paragraphe montre une police différente. Un contributeur lui a appliqué Font family. Sélectionnez le texte et cliquez sur Remove format, puis décochez Font family dans le profil ; voir Éditeur de texte.

Et ensuite ?