Как использовать кастомный шрифт на сайте

Как это работает

Если вам не подходят шрифты, доступные по умолчанию в конструкторе, вы можете подключить другой шрифт для заголовка или основного текста из каталога Google Fonts с помощью пользовательского HTML-кода. Вы можете использовать готовое решение или добавить свой код.

Как настроить

Использование готового решения

1. Откройте проект в Личном кабинете.
2. В боковом меню нажмите Site Builder.
3. Нажмите Открыть Site Builder.
4. Вставьте в блок Ваш код URL шрифта и укажите классы стилей, для которых необходимо изменить свойство font-family.

Пример изменения шрифта заголовка

<style>
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

  .custom-header-font h1,
  .custom-header-font h2,
  .custom-header-font h3,
  .custom-header-font h4,
  .custom-header-font h5,
  .custom-header-font h6 {
    font-family: 'Playfair Display';
  }
</style>

Пример изменения шрифта основного текста

<style>
  @import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

  .custom-main-font {
    font-family: 'Playfair Display';
  }
</style>

5. Нажмите кнопку Просмотр, чтобы увидеть изменения.

Ознакомьтесь с видеоинструкцией к разделу:

Добавление собственного кода

1. В окне конструктора нажмите Добавить блок и выберите блок Ваш код.

2. Вставьте в блок собственный код.

Полезные ссылки