Как добавить сторонний шрифт на сайт

Доступно на платном тарифе и выше

Сторонние шрифты могут помочь вам создать уникальный дизайн для вашего сайта.

В этой статье мы рассмотрим, как добавить сторонний шрифт на сайт SendPulse.

Содержание

Скачайте сторонний шрифт

Перейдите в библиотеку Google Fonts и выберите нужный шрифт и начертание.

Нажмите на иконку корзины (View selected families) вверху панели.

Скопируйте код из поля Use on the web во вкладке Link.

Прокрутите вниз и скопируйте код из поля CSS rules to specify families.

Добавьте код к сайту

В <head> сайта нужно добавить 2 блока кода для стилей шрифтов.

Блок 1. Подключение библиотеки

Перейдите в раздел Сайты (Websites), выберите нужный сайт и нажмите Настройки сайта (Site Settings).

Перейдите в настройках сайта на вкладку Дополнительный код (Custom code) и нажмите Добавить код на сайт (Add code to site).

Выберите расположение в <head>.

Введите название, чтобы различать код в списке добавленных скриптов.

Вставьте код шрифта из поля Use on the web.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&amp;display=swap" rel="stylesheet">

Нажмите Добавить (Add).

Блок 2. Настройка стилей

Для сайтов

Повторите шаги выше и добавьте и добавьте второй код из поля CSS rules to specify families в скобки {} для обозначения стиля селектора body:

<style>
   body { 
   font-family: 'Roboto', sans-serif;
   } 
   .sp-ui-button, 
   .sp-ui-text p, 
   .sp-ui-text a, 
   .sp-ui-text h1, 
   .sp-ui-text h2, 
   .sp-ui-text h3, 
   .sp-ui-text h4, 
   .sp-ui-text li, 
   .sp-ui-text span, 
   .field-block, 
   .field-block input { 
   font-family: 'Roboto', sans-serif; 
   } 
</style>

В нашем примере мы вставляем font-family: 'Roboto', sans-serif;, но будьте внимательны — убедитесь, что вставляете шрифт, который вам нужен.

Для мини-лендингов

Повторите шаги выше и добавьте код шрифта из поля CSS rules to specify families в скобки {} для обозначения стиля селектора body:

<style>
   body {
   font-family: 'Unbounded', sans-serif !important;
   }
   p, a, h1, h2, h3, h4, li, span, label, input {
   font-family: 'Unbounded', sans-serif !important;
   }
</style>

Просмотрите результат

Перейдите на страницу вашего сайта. Убедитесь, что текст отображается в новом шрифте.

Шрифт изменится для всего сайта и вы не сможете использовать стандартные шрифты через конструктор сайта. Для настройки разных шрифтов для разных уровней необходимо внести изменения в код CSS.

Обновлено: 17.06.2024

Оцените, насколько полезна статья "Как добавить сторонний шрифт на сайт"

Оценка: 4 / 5 (8)

Популярное в нашем блоге

Как добавить сторонний шрифт на сайт

Содержание

Скачайте сторонний шрифт

Добавьте код к сайту

Блок 1. Подключение библиотеки

Блок 2. Настройка стилей

Для сайтов

Для мини-лендингов

Просмотрите результат

Начните пользоваться сервисом SendPulse прямо сегодня