Сайты под ключ, сделанные с любовью

Добавление шрифтов в Elementor – инструкция

5 – “Нравится”
Vladimir Sergeev
Vladimir Sergeev
16 июня, 2023
3 мин.
544
Понравилась статья? Поделитесь!
VK
Telegram
WhatsApp

Оглавление

В этой статье расскажу как добавить шрифт в elementor на случай, если ну уж очень понравился, а в google fonts его нет.

Для чего нужен пользовательский шрифт в Elementor

Если вы собственными руками решили добавить шрифт в elementor, то скорее всего у вас на это есть свои причины, но как правило это:

  • Оптимизация скорость загрузки сайта путем полного отключения Google Fonts и других внешних ресурсов.
  • Понравившегося вам шрифта просто нет в общедоступных источниках и вы качаете его из интернета.
  • Вы испытываете проблемы со стандартными шрифтами в элементоре.

Если вы столкнулись с любой из этих причин – пристегивайтесь, сейчас все сделаем.

Добавление пользовательского шрифта в elementor

Elementor Pro - лицензия

Элементор Про – один из лучших плагинов для построения сайта. Кстати, этот сайт сделан на нем! 

499 ₽

4300 ₽

Добавить шрифт в elementor достаточно просто, от вас потребуется сделать несколько шагов:

  1. Скачать нужный вам шрифт на компьютер в нужных вам начертаниях: Thin, Light, Regular, Bold, Black. Крайне рекомендую woff и woff2 форматы – они обеспечат меньший вес и лучшую производительность для вашего сайта.
  2. В административной панели перейти: Elementor – Custom Fonts – Add New (добавить новый). Как показано на картинке.
  3. Далее присвоить ему название (будет отображаться в редакторе),
  4. Выбрать его начертание (толщину), стиль, подгрузить скачанные варианты и опубликовать

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

Настройка шрифта в elementor

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

  1. Открываем любую страницу, шаблон с помощью редактора элементор.
  2. Заходим в “Настройки сайта”
  3. Открываем пункт “Глобальные шрифты”
  4. Настраиваем везде, где нам нужно: заголовки, текст и так далее.
  1. В настройках пересохраните постоянные ссылки
  2. Проверьте, поддерживает ли шрифт кириллицу
  3. Загрузите другие форматы, например TTF

После всех произведенных настроек по добавлению шрифта в elementor проверьте его работоспособность со всех устройств

Шрифт для elementor без Pro версии

Не расстраивайтесь если вдруг у вас нет Pro – это далеко не проблема, добавить шрифт в elementor можно и без него. Для этого вам понадобится любой бесплатный плагин из общей библиотеки wordpress с ключами «Custom font», например, старенький и проверенный:

Custom font – Разработчик BrainStorm Force, они же выпустили в свет одну из самых популярных тем Astra.

Настройки по добавлению шрифта для его дальнейшего использования в elementor очень схожи, их я приведу на картинке ниже.

Font Display рекомендую выставлять в значение «Swap» это позволит получить лучшую производительность при загрузке страницы сайта. Схема подключения точно такая же, как и в случае с элементор.

Заключение

В этой статье мы разобрались с основными вопросами, касающимися шрифтов в Elementor. Теперь вы полностью готовы к тому, чтобы начать все необходимые работы над сайтом. Но не забывайте про лицензии, пока ваш проект слаб и не окреп, скорее всего никто и не обратит внимание, но как только он превратится в популярный ресурс – будьте готовы к претензиям.

Изучите Google Fonts, возможно что-то приглянется и вы надолго забудете про лицензии.

5 – “Нравится”
VK
Telegram
WhatsApp

Похожие материалы

Остались вопросы или нужна помощь?

Оставьте заявку и я свяжусь с вами в ближайшее время и отвечу на все вопросы. Я не кусаюсь :)

Пишите в мессенджеры, отвечаю в течение 15 минут.

Доверьте создание вашего сайта мне, обещаю только обдуманный подход, никакого обмана и адекватные цены.

Оставьте заявку

Перезвоню вам в течение 10 минут в рабочее время