--- url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/customization/custom-fonts' title: "Gebruik de lettertypen van je merk op builderpagina's | DXPR" author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:32:31+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builder heeft geen eigen lettertype-instelling: tekst op builderpagina's gebruikt de lettertypen van je thema. Om ze te wijzigen laad je een weblettertype in het thema en verwijs je de CSS van het thema ernaar. Aan het eind toont elke builderpagina je merklettertype, in de editor en voor bezoekers. Als je site op DXPR Theme draait, kies je lettertypen in plaats daarvan in de thema-instellingen. 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: "Gebruik de lettertypen van je merk op builderpagina's" description: |- DXPR Builder heeft geen eigen lettertype-instelling: tekst op builderpagina's gebruikt de lettertypen van je thema. Om ze te wijzigen laad je een weblettertype in het thema en verwijs je de CSS van het thema ernaar. Aan het eind toont elke builderpagina je merklettertype, in de editor en voor bezoekers. Als je site op DXPR Theme draait, kies je lettertypen in plaats daarvan in de thema-instellingen. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:32:31+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/nl/hc/documentation/learn-dxpr-builder/customization/custom-fonts' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/customization/custom-fonts' description: |- DXPR Builder heeft geen eigen lettertype-instelling: tekst op builderpagina's gebruikt de lettertypen van je thema. Om ze te wijzigen laad je een weblettertype in het thema en verwijs je de CSS van het thema ernaar. Aan het eind toont elke builderpagina je merklettertype, in de editor en voor bezoekers. Als je site op DXPR Theme draait, kies je lettertypen in plaats daarvan in de thema-instellingen. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Help Center](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[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) # Gebruik de lettertypen van je merk op builderpagina's. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [Geef builderinhoud stijl met de CSS van je thema](/nl/hc/documentation/learn-dxpr-builder/customization/custom-css) - [Tekstgrootte en -kleur instellen](/nl/hc/documentation/learn-dxpr-builder/element-settings/typography) - [Pictogrambibliotheken](/nl/hc/documentation/learn-dxpr-builder/customization/icon-libraries) DXPR Builder heeft geen eigen lettertype-instelling: tekst op builderpagina's gebruikt de lettertypen van je thema. Om ze te wijzigen laad je een weblettertype in het thema en verwijs je de CSS van het thema ernaar. Aan het eind toont elke builderpagina je merklettertype, in de editor en voor bezoekers. Als je site op DXPR Theme draait, kies je lettertypen in plaats daarvan in de thema-instellingen. ## Voordat je begint - Je hebt toegang tot de bestanden van je thema nodig; gebruik een aangepast thema of een subthema. - Controleer of de licentie van het lettertype gebruik op een website toestaat. - De stappen gebruiken de library `global-styling` en `css/custom.css` uit [Aangepaste CSS](/nl/hc/documentation/learn-dxpr-builder/customization/custom-css). ## Instellen 1. Voeg de stylesheet van het lettertype toe aan de library in `mytheme.libraries.yml`. Voor een Google-lettertype: ```yaml global-styling: css: theme: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap': { type: external } css/custom.css: {} ``` 2. Stel het lettertype in `css/custom.css` in: ```css body { font-family: 'Inter', sans-serif; } ``` 3. Wis de caches bij **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`). 4. Open een pagina in de builder en bekijk een **Text**-element. ## Host het lettertype zelf Een zelfgehost lettertype voorkomt een verzoek aan een derde partij, wat voor privacyregels kan uitmaken. 1. Download het lettertype in WOFF2-formaat en plaats de bestanden in de map `fonts/` van het thema. 2. Declareer elk gewicht in `css/custom.css`, boven de regel uit stap 2: ```css @font-face { font-family: 'BrandFont'; src: url('../fonts/brandfont.woff2') format('woff2'); font-weight: 400; font-display: swap; } ``` 3. Gebruik `'BrandFont'` in je `font-family`-regels, verwijder de Google-regel uit de library en wis de caches. ## Wat je ziet Tekst in elk builderelement gebruikt het nieuwe lettertype, in de bewerkmodus en op de gepubliceerde pagina. Het paneel **Style** van elk element stelt nog steeds grootte en kleur in; zie [Tekstgrootte en kleur wijzigen](/nl/hc/documentation/learn-dxpr-builder/element-settings/typography). De knop **Font family** van de teksteditor staat standaard uit. Die toont de standaard webveilige lettertypen van CKEditor, niet die van jou, dus houd hem uit zodat redacteurs on brand blijven. ## DXPR Theme DXPR Theme heeft eigen lettertype-instellingen. Ga naar **Appearance**, open de DXPR Theme-instellingen (`/admin/appearance/settings/dxpr_theme`) en vouw **Fonts** uit. Het stelt **Base Font**, **Headings**, **Navigation**, **Site Name** en **Blockquote** apart in, dus je hebt er geen CSS voor nodig. ## Als je het lettertype niet ziet - **De tekst toont nog steeds het oude lettertype.** De library is niet geladen, of de cache bevat de oude CSS. Controleer of `mytheme.info.yml` de library vermeldt en wis daarna de caches via `/admin/config/development/performance`. - **Koppen of sommige vakken behouden een ander lettertype.** Een themaregel voor dat element is specifieker dan `body`. Inspecteer de tekst in de browser en voeg zijn selector aan je regel toe. - **Eén alinea toont een ander lettertype.** Een redacteur heeft er **Font family** op toegepast. Selecteer de tekst en klik op **Remove format** en vink daarna **Font family** in het profiel uit; zie [Teksteditor](/nl/hc/documentation/learn-dxpr-builder/customization/text-editor#toolbar-buttons-per-role). ## Wat nu? - [Aangepaste CSS](/nl/hc/documentation/learn-dxpr-builder/customization/custom-css): de library en stylesheet waarop deze stappen voortbouwen. - [Tekstgrootte en kleur wijzigen](/nl/hc/documentation/learn-dxpr-builder/element-settings/typography): wat redacteurs per element instellen. - [Pictogrambibliotheken](/nl/hc/documentation/learn-dxpr-builder/customization/icon-libraries): de pictogramlettertypen die met DXPR Builder meekomen.