Наверное каждый, кто создавал сайт на WordPress, знает, что это за зверь такой – Elementor. Кто не знает – это крутой и функциональный конструктор страниц для WordPress, который под капотом имеет массу интересных возможностей. Сегодня рассмотрим, как добавить шрифт в Elementor. Причем там есть нюансик, который заставил меня в свое время знатно понервничать и попотеть.
Как добавить пользовательский шрифт в Elementor?
Не хочу разводить воду, про то, что Elementor супер плагин или наоборот, плох, потому что сайты на нем иногда ужасно тормозят. По опыту скажу, что в умелых руках и в определенных ситуациях, Elementor отлично решает все задачи и помогает запилить быстрый и достаточно качественный сайт.
Итак, когда нам нужно добавить шрифт в Elementor, то первое, что мы делаем – заходим в админку сайта. Там наводим в меню на пункт с Elementor и находим пункт “Custom Fonts”. Прям как на рисунке.
Далее стандартно попадем в меню, где увиим кнопку “Добавить новый” или “ADD NEW“. Нажимаем. И попадаем в поле, где мы будем добавлять шрифть в Elementor.
Называем наш шрифт, но желательно чтобы в нем было название семейства шрифта. Это нужно вам, чтобы потмо вы не путались. Это название будет выводиться в самом конструкторе, когда вы захотите элеемнту задать собственный шрифт.
В общем, шрифт назвали. Теперь можете смело нажимать на кнопку”ADD FONT VARIATION”.
Перед вами откроется вот такая вот табличка, куда нужно будет добавить файлы шрифта. сморим рисунок.
Понятным делом, что у вас уже должен быть скачан шрифт, который вы собираетесь добавить. Причем, когда скачиваете шрифт, не печальтесь, если он у вас всего в одном формате, а здесь в таблице их несколько.
Как добавить шрифт в Elementor: нюансы
Нюанс №1
У вас должен быть установлен Elementor PRO. В этом случае легко сможете добавить шрифт в Elementor. Если PRO версии нет, то шрифт придется добавлять по-другому. PRO версию можно найти в сети, но я вам этого не говорил :). Для каких-то чатсных целей ее свободно можно будет использовать. В остальных случаях, на ваш страх и риск. По опыту всречал, когда крякнутый Elementor PRO использовали довольно крупные компании. Будем надеятся, что они уже купили себе лицензию, чтобы спать спокойно :).
Нюанс №2
Чтобы добавить новый грифт будет достаточно добавить файл TTF c расширением .ttf. Большинство сайтов, где вы будете скачивать шрифт предлагают скачать именно этот файл. Бываютк онечно ресурсы по серьезней, которые предложат еще скачать WOFF и WOFF2. Самые продвинутые предлагают скачать еще и EOT File. EOT file – это прям классическая классика для браузера Internet Explorer. Интересно, кто его еще использует? 🙂 Но на самом деле я застал время, когда он был ооочень популярным и Хромом даже и не пахло, поэтому он вызывает у меня только приятные воспоминания молодости.
В общем, если если есть TTF-файл, значит шрифт уже получится добавить. Если есть еще WOFF и WOOF1, то вообще прекрасно. SVG-файл шрифта я никогда не добавлял.
Нюанс №3. Потенциальная проблема, когда вы пытаетесь добавить шрифт в Elementor
Вот и смешно и грешно. Но с этой пробелмой мы как-то бились долгое время. Ну тупо не могли понять, почему добавляем шрифт, как делали сотни раз, но он ни в какую не добавляется. Что мы только не делали. Этоя с напарником. При этом считаем себя неплохими программистами, котрые делают достаточно сложные вещи и свободно программируют на PHP, которым создать сайт с нуля чистым кодом с админкой – это не пробелма.
В общем, если вы добавили файлы шрифта и все правильно сохранили и в конструкторе Elementor видите свой шрифт, задаете его какому-то элементу, но шрифт не “цепляется”, то обратите внимание на следующий момент.
Посмотрите внимательно на рисунок и потом на свою таблицу добавления файлов. Как у вас добавлися файл: с https или с http?
Протокол должен соответствовать сайту. В нашем случае у нас сайт был с SSL и, соответственно, его ссылки начинались с https, но когда мы добавяли файлы шрифтов, они добавлялись по ссылке нашего сайта, но по http. Причем, елси просматривать фалы шрифта в Медиафайлах, то там ссылки на файл были с https.
Такая ситуация вызывает пробелму смешанного контента. То есть, сайт защищен, но его страницы ссылаются на незащищенный контент. Браузер такой контент блокирует. Вот и получалось, что шрифт добавляли, но браузер его игнорировал.
Решилается все еще проще – просто в самой таблице допишите буковку “s“, чтобы http стало https, как на рисунке.
Проблема мелочная, но заставила понервничать и ввела нас на время в ступор. Надеюсь, вам поможет статья :).