Загрузка пользовательских шрифтов в Elementor

Структура раздела:

Загрузка пользовательских шрифтов в Elementor через функцию Custom Fonts (доступна в Elementor Pro) позволит тебе использовать уникальные шрифты, которые не входят в стандартный набор шрифтов Google Fonts или системных шрифтов. Это полезно, если твой проект требует особого стиля, корпоративного брендинга или тебе нужно использовать нестандартные шрифты, предоставленные заказчиком.

Помимо того, что ты сможешь придать сайту уникальность, ты также ускоришь загрузку сайта, поскольку все используемые шрифты помимо системных (Arial, Tahoma, Verdana, Helvetica, Times New Roman, Trebuchet MS, Georgia) будут подгружаются как сторонние ресурсы, если их самостоятельно не загрузить на сайт. Разберемся же как это сделать в Wordpress через плагин Elementor Pro.

Этапы загрузки пользовательских шрифтов через Elementor Pro

1) Подготовь шрифты в любом из форматов WOFF, WOFF2, TTF, EOT или SVG (но для совместимости и скорости загрузки лучше использовать первые два);
2) Перейди в настройки Custom Fonts (в админ. панели WordPress перейдите в Elementor > Custom Fonts);
3) Добавь новый шрифт (Нажми кнопку «Добавить» и введи название шрифта, которое будет отображаться в редакторе Elementor); загрузи файлы шрифтов и укажи стиль (например, «Normal» для обычного текста или «Italic» для курсивного) и толщину (400 для нормального текста и др.);
4) Сохрани настройки, нажав «Обновить»;
5) Используй шрифт в Elementor — открой любой виджет Elementor (например, Заголовок) и в настройках типографики выбери добавленный шрифт в выпадающем списке (он будет отображаться в самом верху списка шрифтов).

Советы

✫ Используй онлайн-инструменты, такие как Font Squirrel, для оптимизации шрифтов;
✫ Проверь лицензию — убедись, что шрифт разрешено использовать на сайте;
✫ После загрузки новых шрифтов очисти кэш браузера и плагинов, чтобы увидеть изменения;
✫ Подгружай шрифты в начале своей работы, чтобы в конце не пришлось менять шрифт каждого элемента, если ты вдруг забыл установить глобальные шрифты, о которых мы говорили в прошлой статье.

Теперь ты с легкостью сможешь загрузить любой нужный шрифт, сохранив высокую скорость работы сайта.