Конструктор сайтов / Как подключить нестандартный шрифт на сайте
 На главную

Конструктор сайтов

  • Руководство по интеграции

  • Инструкции

  • Расширения

  • Справочники

  • Как подключить нестандартный шрифт на сайте

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

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

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

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

    1. Перейдите в Личный кабинет > Конструктор сайтов.
    2. Вставьте в блок Ваш код 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. Вставьте в блок собственный код.

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

    В другой раз

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

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

    Последнее обновление: 20 июля 2021

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

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