Gebruik de lettertypen van je merk op builderpagina's.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

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.

Instellen

  1. Voeg de stylesheet van het lettertype toe aan de library in mytheme.libraries.yml. Voor een Google-lettertype:

    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:

    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:

    @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.

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.

Wat nu?