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

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

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

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

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

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

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

 1<style>
 2@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');
 3
 4  .custom-header-font h1,
 5  .custom-header-font h2,
 6  .custom-header-font h3,
 7  .custom-header-font h4,
 8  .custom-header-font h5,
 9  .custom-header-font h6 {
10    font-family: 'Playfair Display';
11  }
12</style>

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

1<style>
2  @import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');
3
4  .custom-main-font {
5    font-family: 'Playfair Display';
6  }
7</style>

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

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

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

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

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

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