--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/customization/custom-fonts' title: 'Marken-Fonts auf Builder-Seiten nutzen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:04:17+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Je huisstijl toepassen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Marken-Fonts auf Builder-Seiten nutzen' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:04:17+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/customization/custom-fonts' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/customization/custom-fonts' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # Marken-Fonts auf Builder-Seiten nutzen. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [Builder-Inhalte mit Theme-CSS stylen](/de/hc/documentation/learn-dxpr-builder/customization/custom-css) - [Textgröße und -farbe ändern](/de/hc/documentation/learn-dxpr-builder/element-settings/typography) - [Icon-Bibliotheken](/de/hc/documentation/learn-dxpr-builder/customization/icon-libraries) 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](/de/hc/documentation/learn-dxpr-builder/customization/custom-css). ## Einrichtung 1. Fügen Sie das Stylesheet des Fonts zur Bibliothek in `mytheme.libraries.yml` hinzu. Für einen Google-Font: ```yaml 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`: ```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: ```css @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](/de/hc/documentation/learn-dxpr-builder/element-settings/typography). 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](/de/hc/documentation/learn-dxpr-builder/customization/text-editor#toolbar-buttons-per-role). ## Wie geht es weiter? - [Eigenes CSS](/de/hc/documentation/learn-dxpr-builder/customization/custom-css): Bibliothek und Stylesheet, auf denen diese Schritte aufbauen. - [Textgröße und -farbe ändern](/de/hc/documentation/learn-dxpr-builder/element-settings/typography): was Bearbeitende pro Element einstellen. - [Icon-Bibliotheken](/de/hc/documentation/learn-dxpr-builder/customization/icon-libraries): die Icon-Fonts, die DXPR Builder mitbringt.