Використовуйте шрифти свого бренду.

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

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

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

  • Вам потрібен доступ до файлів вашої теми; використовуйте власну тему або підтему.
  • Перевірте, що ліцензія шрифту дозволяє використання на сайті.
  • Кроки використовують бібліотеку global-styling і css/custom.css зі сторінки Власний CSS.

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

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

    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:

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

  3. Очистьте кеші в Configuration > Development > Performance (/admin/config/development/performance).

  4. Відкрийте сторінку в конструкторі й подивіться на елемент Text.

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

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

  1. Завантажте шрифт у форматі WOFF2 і покладіть файли в теку fonts/ теми.

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

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

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

Що ви бачите

Текст у кожному елементі конструктора використовує новий шрифт, у режимі редагування та на опублікованій сторінці. Панель Style кожного елемента досі встановлює розмір і колір; див. Зміна розміру та кольору тексту.

Кнопка 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 у профілі; див. Текстовий редактор.

Що далі?