---
url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%B2%D0%BB%D0%B0%D1%81%D0%BD%D1%96-%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B8'
title: 'Використовуйте шрифти свого бренду | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T20:08:12+00:00'
updated: '2026-10-24T20:08:10+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'DXPR Builder не має власного налаштування шрифту: текст на сторінках конструктора використовує шрифти вашої теми. Щоб змінити їх, ви завантажуєте вебшрифт у темі й спрямовуєте на нього CSS теми. Наприкінці кожна сторінка конструктора показує шрифт вашого бренду, в редакторі та відвідувачам. Якщо ваш сайт працює на DXPR Theme, натомість виберіть шрифти в її налаштуваннях теми.'
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-24T20:08:10+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Використовуйте шрифти свого бренду'
      description: 'DXPR Builder не має власного налаштування шрифту: текст на сторінках конструктора використовує шрифти вашої теми. Щоб змінити їх, ви завантажуєте вебшрифт у темі й спрямовуєте на нього CSS теми. Наприкінці кожна сторінка конструктора показує шрифт вашого бренду, в редакторі та відвідувачам. Якщо ваш сайт працює на DXPR Theme, натомість виберіть шрифти в її налаштуваннях теми.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T20:08:12+0000'
      dateModified: '2026-10-24T20:08:10+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/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%B2%D0%BB%D0%B0%D1%81%D0%BD%D1%96-%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B8'
      articleSection: 'Адаптація під бренд'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%B2%D0%BB%D0%B0%D1%81%D0%BD%D1%96-%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B8'
      description: 'DXPR Builder не має власного налаштування шрифту: текст на сторінках конструктора використовує шрифти вашої теми. Щоб змінити їх, ви завантажуєте вебшрифт у темі й спрямовуєте на нього CSS теми. Наприкінці кожна сторінка конструктора показує шрифт вашого бренду, в редакторі та відвідувачам. Якщо ваш сайт працює на DXPR Theme, натомість виберіть шрифти в її налаштуваннях теми.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/uk'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: uk
---
[Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Керування сайтом](/uk/hc/documentation/learn-dxpr-builder/manage) /[Адаптація під бренд](/uk/hc/documentation/learn-dxpr-builder/customization) # Використовуйте шрифти свого бренду.

 Вивчення DXPR BuilderКерування сайтомАдаптація під бренд

   ## In this guide

 Related guides

- [Додайте власний CSS до сторінок конструктора](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%B2%D0%BB%D0%B0%D1%81%D0%BD%D0%B8%D0%B9-css)
- [Зміна розміру й кольору тексту](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0)
- [Бібліотеки піктограм](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%B1%D1%96%D0%B1%D0%BB%D1%96%D0%BE%D1%82%D0%B5%D0%BA%D0%B8-%D0%BF%D1%96%D0%BA%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D0%BC)

DXPR Builder не має власного налаштування шрифту: текст на сторінках конструктора використовує шрифти вашої теми. Щоб змінити їх, ви завантажуєте вебшрифт у темі й спрямовуєте на нього CSS теми. Наприкінці кожна сторінка конструктора показує шрифт вашого бренду, в редакторі та відвідувачам. Якщо ваш сайт працює на DXPR Theme, натомість виберіть шрифти в її налаштуваннях теми.

## Перш ніж почати

- Вам потрібен доступ до файлів вашої теми; використовуйте власну тему або підтему.
- Перевірте, що ліцензія шрифту дозволяє використання на сайті.
- Кроки використовують бібліотеку `global-styling` і `css/custom.css` зі сторінки [Власний CSS](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%B2%D0%BB%D0%B0%D1%81%D0%BD%D0%B8%D0%B9-css).

## Налаштування

1. Додайте таблицю стилів шрифту до бібліотеки в `mytheme.libraries.yml`. Для шрифту Google:

    ```yaml
    global-styling:
      css:
        theme:
          'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap': { type: external }
          css/custom.css: {}

    ```
2. Установіть шрифт у `css/custom.css`:

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

    ```
3. Очистьте кеші в **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`).
4. Відкрийте сторінку в конструкторі й подивіться на елемент **Text**.

## Розмістіть шрифт самі

Шрифт на власному хостингу уникає запиту до третьої сторони, що може мати значення для правил приватності.

1. Завантажте шрифт у форматі WOFF2 і покладіть файли в теку `fonts/` теми.
2. Заявіть кожну насиченість у `css/custom.css`, над правилом із кроку 2:

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

    ```
3. Використовуйте `'BrandFont'` у своїх правилах `font-family`, вилучіть рядок Google з бібліотеки й очистьте кеші.

## Що ви бачите

Текст у кожному елементі конструктора використовує новий шрифт, у режимі редагування та на опублікованій сторінці. Панель **Style** кожного елемента досі встановлює розмір і колір; див. [Зміна розміру та кольору тексту](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0).

Кнопка **Font family** текстового редактора типово вимкнена. Вона перелічує стандартні веббезпечні шрифти CKEditor, а не ваші, тож тримайте її вимкненою, щоб редактори лишалися в бренді.

## DXPR Theme

DXPR Theme має власні налаштування шрифту. Перейдіть до **Appearance**, відкрийте налаштування DXPR Theme (`/admin/appearance/settings/dxpr_theme`) і розгорніть **Fonts**. Він встановлює **Base Font**, **Headings**, **Navigation**, **Site Name** і **Blockquote** окремо, тож CSS для них вам не потрібен.

## Якщо ви не бачите шрифту

- **Текст досі показує старий шрифт.** Бібліотеку не завантажено, або кеш тримає старий CSS. Перевірте, що `mytheme.info.yml` перелічує бібліотеку, потім очистьте кеші за шляхом `/admin/config/development/performance`.
- **Заголовки або деякі блоки зберігають інший шрифт.** Правило теми для цього елемента конкретніше за `body`. Перегляньте текст у браузері й додайте його селектор до свого правила.
- **Один абзац показує інший шрифт.** Редактор застосував до нього **Font family**. Виділіть текст і натисніть **Remove format**, потім зніміть позначку з **Font family** у профілі; див. [Текстовий редактор](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BE%D0%B2%D0%B8%D0%B9-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80#toolbar-buttons-per-role).

## Що далі?

- [Власний CSS](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%B2%D0%BB%D0%B0%D1%81%D0%BD%D0%B8%D0%B9-css): бібліотека та таблиця стилів, на яких будуються ці кроки.
- [Зміна розміру та кольору тексту](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0): що редактори встановлюють для кожного елемента.
- [Бібліотеки піктограм](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%B1%D1%96%D0%B1%D0%BB%D1%96%D0%BE%D1%82%D0%B5%D0%BA%D0%B8-%D0%BF%D1%96%D0%BA%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D0%BC): шрифти піктограм, які постачаються з DXPR Builder.