Skip to content

Use your brand fonts on builder pages

DXPR Builder has no font setting of its own: text on builder pages uses your theme's fonts. To change them, you load a web font in the theme and point the theme's CSS at it. At the end, every builder page shows your brand font, in the editor and for visitors. If your site runs DXPR Theme, choose fonts in its theme settings instead.

Before you start

  • You need access to your theme's files; use a custom theme or a sub-theme.
  • Check that the font's licence allows use on a website.
  • The steps use the global-styling library and css/custom.css from Custom CSS.

Set up

  1. Add the font's stylesheet to the library in mytheme.libraries.yml. For a 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. Set the font in css/custom.css:

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

  3. Clear caches at Configuration > Development > Performance (/admin/config/development/performance).

  4. Open a page in the builder and look at a Text element.

Host the font yourself

A self-hosted font avoids a request to a third party, which can matter for privacy rules.

  1. Download the font in WOFF2 format and place the files in the theme's fonts/ folder.

  2. Declare each weight in css/custom.css, above the rule from step 2:

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

  3. Use 'BrandFont' in your font-family rules, remove the Google line from the library and clear caches.

What you see

Text in every builder element uses the new font, in edit mode and on the published page. Each element's Style panel still sets size and colour; see Change text size and colour.

The text editor's Font family button is off by default. It lists CKEditor's standard web-safe fonts, not yours, so keep it off to keep editors on brand.

DXPR Theme

DXPR Theme has its own font settings. Go to Appearance, open the DXPR Theme settings (/admin/appearance/settings/dxpr_theme) and expand Fonts. It sets Base Font, Headings, Navigation, Site Name and Blockquote separately, so you need no CSS for them.

If you don't see the font

  • The text still shows the old font. The library is not loaded, or the cache holds the old CSS. Check that mytheme.info.yml lists the library, then clear caches at /admin/config/development/performance.
  • Headings or some boxes keep another font. A theme rule for that element is more specific than body. Inspect the text in the browser and add its selector to your rule.
  • One paragraph shows a different font. An editor applied Font family to it. Select the text and click Remove format, then untick Font family in the profile; see Text editor.

What's next?

Something wrong or missing on this page? Report it or edit the page.