Продвинутые функции

Подключение своего шрифта из Google Fonts

Встроенные шрифты

В теме Seller 2.0 доступно 11 вариантов шрифта, которые можно выбрать в панели управления темой:

  • Exo 2
  • Jura
  • Lora
  • Merriweather
  • Montserrat
  • Nunito
  • Open Sans
  • Playfair Display
  • Roboto
  • Rubik
  • Системные шрифты (sans-serif)

Выбор шрифта осуществляется через настройку common__design_font_family (тип: image select) в разделе Общие настройки — Оформление сайта — Настройки шрифтов.

Выбранный шрифт применяется через CSS-переменную --theme-font.

Настройка «Использовать шрифт только для заголовков»

В этом же разделе есть чекбокс «Использовать шрифт только для заголовков» (common__design_font_family_headings). В текущей версии темы эта настройка шаблонами не используется — её включение ни на что не влияет.

Подключение своего шрифта (Premium)

Подключение произвольного шрифта из Google Fonts доступно в Premium-версии темы и осуществляется через две настройки:

  • Свой шрифт: CSS-свойство font-family (common__design_font_family_custom_name) — CSS-имя шрифта
  • Свой шрифт: ссылка (common__design_font_family_custom_link) — ссылка на подключение шрифта

Если заполнено CSS-имя шрифта, тема подключает стили по указанной ссылке и переопределяет переменную --theme-font; встроенный шрифт при этом не загружается.

Пошаговая инструкция

  1. Откройте сервис Google Fonts и найдите нужный шрифт
  2. Выберите необходимые начертания (рекомендуется выбрать кириллический поднабор)
  3. Скопируйте ссылку подключения шрифта в настройку Свой шрифт: ссылка
  4. Скопируйте свойство font-family в настройку Свой шрифт: CSS-свойство font-family
  5. Сохраните настройки в панели управления темой

Google Fonts

Пример подключения шрифта Noto Sans

Свой шрифт: ссылка
https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap

Свой шрифт: CSS-свойство font-family
'Noto Sans', sans-serif

Настройки шрифта Noto Sans в панели управления темой

Доступ к настройке шрифта через JavaScript

// Текущее значение шрифта
window.waTheme?.themesettings?.settings?.common__design_font_family?.value;

// Пользовательский шрифт (имя)
window.waTheme?.themesettings?.settings?.common__design_font_family_custom_name?.value;

// Пользовательский шрифт (ссылка)
window.waTheme?.themesettings?.settings?.common__design_font_family_custom_link?.value;