Marken-Fonts auf Builder-Seiten nutzen.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

DXPR Builder hat keine eigene Schrifteinstellung: Text auf Builder-Seiten nutzt die Fonts Ihres Themes. Um sie zu ändern, laden Sie einen Webfont im Theme und zeigen das Theme-CSS darauf. Am Ende zeigt jede Builder-Seite Ihren Markenfont, im Editor und für Besucher. Wenn Ihre Website DXPR Theme nutzt, wählen Sie Fonts stattdessen in seinen Theme-Einstellungen.

Bevor Sie beginnen

  • Sie brauchen Zugang zu den Dateien Ihres Themes; nutzen Sie ein eigenes Theme oder ein Sub-Theme.
  • Prüfen Sie, dass die Schriftlizenz die Nutzung auf einer Website erlaubt.
  • Die Schritte nutzen die global-styling-Bibliothek und css/custom.css aus Eigenes CSS.

Einrichtung

  1. Fügen Sie das Stylesheet des Fonts zur Bibliothek in mytheme.libraries.yml hinzu. Für einen Google-Font:

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

  2. Setzen Sie den Font in css/custom.css:

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

  3. Leeren Sie Caches unter Configuration > Development > Performance (/admin/config/development/performance).

  4. Öffnen Sie eine Seite im Builder und sehen Sie sich ein Text-Element an.

Font selbst hosten

Ein selbst gehosteter Font vermeidet eine Anfrage an Dritte, was für Datenschutzregeln zählen kann.

  1. Laden Sie den Font im WOFF2-Format herunter und legen Sie die Dateien in den fonts/-Ordner des Themes.

  2. Deklarieren Sie jede Strichstärke in css/custom.css, über der Regel aus Schritt 2:

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

  3. Nutzen Sie 'BrandFont' in Ihren font-family-Regeln, entfernen Sie die Google-Zeile aus der Bibliothek und leeren Sie Caches.

Was Sie sehen

Text in jedem Builder-Element nutzt den neuen Font, im Bearbeitungsmodus und auf der veröffentlichten Seite. Das Style-Panel jedes Elements setzt weiterhin Größe und Farbe; siehe Textgröße und -farbe ändern.

Die Schaltfläche Font family des Texteditors ist standardmäßig aus. Sie listet CKEditors websichere Standard-Fonts, nicht Ihre, halten Sie sie daher aus, um die Redaktion bei der Marke zu halten.

DXPR Theme

DXPR Theme hat eigene Schrifteinstellungen. Gehen Sie zu Appearance, öffnen Sie die DXPR-Theme-Einstellungen (/admin/appearance/settings/dxpr_theme) und klappen Sie Fonts auf. Es setzt Base Font, Headings, Navigation, Site Name und Blockquote getrennt, daher brauchen Sie dafür kein CSS.

Wenn Sie den Font nicht sehen

  • Der Text zeigt weiterhin den alten Font. Die Bibliothek ist nicht geladen, oder der Cache hält das alte CSS. Prüfen Sie, dass mytheme.info.yml die Bibliothek listet, dann leeren Sie Caches unter /admin/config/development/performance.
  • Überschriften oder manche Boxen behalten einen anderen Font. Eine Theme-Regel für dieses Element ist spezifischer als body. Untersuchen Sie den Text im Browser und fügen Sie seinen Selektor zu Ihrer Regel hinzu.
  • Ein Absatz zeigt einen anderen Font. Eine bearbeitende Person hat Font family darauf angewendet. Markieren Sie den Text und klicken Sie auf Remove format, dann deaktivieren Sie Font family im Profil; siehe Texteditor.

Wie geht es weiter?