---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/customization/custom-fonts'
title: 'Use your brand fonts on builder pages | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Load brand web fonts through the theme so builder pages use them'
tags:
  - 'Match your brand'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Use your brand fonts on builder pages'
      description: 'Load brand web fonts through the theme so builder pages use them'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/customization/custom-fonts'
      articleSection: 'Match your brand'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/customization/custom-fonts'
      description: 'Load brand web fonts through the theme so builder pages use them'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Match your brand](/hc/documentation/learn-dxpr-builder/customization) # Use your brand fonts on builder pages.

Load brand web fonts through the theme so builder pages use them

 Learn DXPR BuilderManage the siteMatch your brand

   ## In this guide

 Related guides

- [Custom CSS](/hc/documentation/learn-dxpr-builder/customization/custom-css)
- [Typography](/hc/documentation/learn-dxpr-builder/element-settings/typography)
- [Icon libraries](/hc/documentation/learn-dxpr-builder/customization/icon-libraries)

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](/hc/documentation/learn-dxpr-builder/customization/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](/hc/documentation/learn-dxpr-builder/element-settings/typography).

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](/hc/documentation/learn-dxpr-builder/customization/text-editor#toolbar-buttons-per-role).

## What's next?

- [Custom CSS](/hc/documentation/learn-dxpr-builder/customization/custom-css): the library and stylesheet these steps build on.
- [Change text size and colour](/hc/documentation/learn-dxpr-builder/element-settings/typography): what editors set per element.
- [Icon libraries](/hc/documentation/learn-dxpr-builder/customization/icon-libraries): the icon fonts that ship with DXPR Builder.