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

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

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

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

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

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

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

Copy
Full screen
Small screen
<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>

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

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

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

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

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


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

  1. В окне конструктора нажмите Добавить блок и выберите блок Ваш код.
  1. Вставьте в блок собственный код.
Была ли статья полезна?
Спасибо!
Что может сделать страницу еще лучше? Сообщение
Жаль, что так произошло
Расскажите, почему статья не была полезна. Сообщение
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
Оценить страницу
Оценить страницу
Что может сделать страницу еще лучше?

В другой раз

Спасибо за обратную связь!

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

Последнее обновление: 26 марта 2024

Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

Сообщите о проблеме
Мы постоянно улучшаем качество нашей документации. Ваш отзыв поможет нам в этом.
Укажите email-адрес, чтобы мы могли связаться с вами
Спасибо за обратную связь!