Кастомные шрифты для отдельных элементов
На Flexbe можно настроить шрифты для 4 видов текста на странице:
- Заголовки
- Подзаголовки
- Тексты
- Цитаты
Шрифт применяется ко всем элементам выбранного типа на странице.
Если вам нужно изменить шрифт только для определенного текстового элемента, инструкция ниже поможет вам.
Пример: вы хотите сделать для пунктов меню другой шрифт, нежели во всех остальных текстовых элементах на странице.
Загрузка собственного шрифта на сайт
Перейдите в раздел Настройки -> Шрифты.
В подразделе Мои Шрифты загрузите файл с необходимым шрифтом. Формат файла должен быть WOFF2 или TTF.
В качестве примера мы загрузили шрифт DidactGothic.
После загрузки шрифта, нажмите кнопку Настроить.
Кликните на иконку, чтобы скопировать готовые CSS-стили загруженного шрифта.
Назначение кастомного класса элементу
Перейдите в редактор нужной вам страницы.
Используя латинские буквы, назовите кастомный класс в настройках того элемента, к которому будет применяться уникальный шрифт. Затем нажмите кнопку Добавить.
Мы указали didact в настройках элемента Горизонтальное меню.
Применение шрифта к элементу на странице
Перейдите в каталог секций и в подразделе Прочее выберите секцию HTML-код.
Перейдите в настройки HTML-секции и на вкладке HTML удалите весь код. Затем нажмите кнопку Применить.
Теперь перейдите на вкладку CSS.
1. Добавьте стили, скопированные при добавлении собственного шрифта.
2. Далее подключите шрифт к кастомному классу. Вместо didact укажите ваш класс из настроек элемента.
3. Итоговый результат выглядит так:
{% set language = 'css' %}
{% set code =
'/* Вставьте стили, скопированные при добавлении собственного шрифта */
@font-face {
font-family: "DidactGothic";
font-weight: 400;
font-style: normal;
src: url("/files/DidactGothic-Regular.ttf") format("truetype");
font-display: swap;
}
/* Укажите созданный вами класс элемента, к которому будет применяться шрифт. Значение font-family должно совпадать со значением в коде выше */
.didact,
.didact * {
font-family: "DidactGothic", Arial, Helvetica, sans-serif;
}'
%}
e Выключите тогл Изолировать стили, чтобы стили применились по всей странице.
Далее нажмите Применить и Сохранить изменения страницы.
Готово! В режиме просмотра страницы проверяем результат.
Как только вы убедились, что стиль работает, сделайте секцию с кодом Глобальной в настройках секции.
В режиме просмотра Глобальная секция без кода будет иметь нулевую высоту, и поэтому не будет видна.
Вы можете добавлять Глобальную секцию на всех страницах, где используете элемент с таким же классом, чтобы применить к нему тот же шрифт.
Для удобства, дайте Глобальной секции уникальное название, чтобы легко находить ее в списке секций.
Звонок по России бесплатный
8 (800) 555-45-12
© 2012 – 2024 ООО «Флексби»
