Содержание
У нас нет возможности загрузить свой файл шрифта, но можно подключить его с других сервисов, например:
Заметка: шрифт можно подключить, только если он есть на одном из этих ресурсов и является бесплатным. В целом, подключение шрифта, которого нет у нас в этом списке
Добавляем шрифт с fonts.google.com
1. Находите нужный вам шрифт или ближайший, похожий к нему, предварительно можете отфильтровать и выбрать только Cyrillic.
2. Нажимаете на окошко с нужным шрифтом:
3. Нажимаете на кнопку с плюсиком
4. Копируете ссылку:
5. И добавляете ее в плагин "Свой код", в поле "Перед </head>".
Как добавить?
Чтобы добавить скрипт, перейдите в раздел "Плагины"
Выберите плагин “Свой код”
Код добавляете в поле Код перед </body>
Аналогично предыдущему коду, добавляете код из инструкции ниже в HEAD, сразу после предыдущего скрипта, но предварительно данное CSS свойство нужно добавить в специальные тэги и добавить !important для повышения приоритета собственных стилей.
<style type="text/css">
.myFonts *, .myFonts {
font-family: 'Reggae One', cursive !important;
}
</style>
В итоге получится такая конструкция (Код из Google Fonts + код из инструкции):
Пример в плагине инструкции с шрифтом: 'Reggae One', обратите внимание, что у вас будет свое название шрифта в параметре font-family: 'Название вашего шрифта' , получить его можно там же, где и код в шаге 4 (cм скриншот ниже). Например смотрим название для шрифта Merriweather
Меняем в коде строчку: font-family: 'Reggae One', cursive !important;
на font-family: 'Merriweather', cursive !important;
6. Сохраняете изменения в настройках сайта и переходите в редактор нужной страницы. В редакторе, например, у виджета "Текст", указываете класс myFonts.
Публикуете станицу или же выполняете предпросмотр. В результате у текста начинает отображаться выбранный вами шрифт.
До:
После:
Если вы сделали все шаги, но шрифт так и не изменился, в конце инструкции есть самые частые ошибки, которые допускаются в процессе настройки.
Добавляем шрифт с allfont.ru
- Переходим на сайт https://allfont.ru/ и открываем понравившийся шрифт
- На странице шрифта находим ссылку на сам шрифт и открываем его
- Копируем все что начинается с @font-face
- Теперь добавляем скопированный код в плагин Свой код - Код перед </head>
Как добавить?
Чтобы добавить скрипт, перейдите в раздел "Плагины"
Выберите плагин “Свой код”
Код добавляете в поле Код перед </body>
<style type="text/css">
/*Сначала код который вы скопировали
В скопированном коде в поле url нужно заменить http на https
*/
@font-face {
font-family: 'Planet Benson 2';
font-style: normal;
font-weight: 400;
src: local('Planet Benson 2'), local('PlanetBenson2-Regular'),
url(https://allfont.ru/cache/fonts/planet-benson-2_1c08304ee051caae9a4f9ae0611d882e.woff) format('woff'),
url(https://allfont.ru/cache/fonts/planet-benson-2_1c08304ee051caae9a4f9ae0611d882e.ttf) format('truetype');
}
/*Меняете название 3dumb на название из кода который вы добавили выше, сейчас это будет Planet Benson 2 */
.myFonts *, .myFonts {font-family: '3dumb' !important;}
</style>
5. Сохраняете изменения в настройках сайта и переходите в редактор нужной страницы. В редакторе, например, у виджета "Текст", указываете класс myFonts.
Столкнулись с трудностями при подключении?
Все сделал по инструкции, но шрифт не поменялся
Обратите внимание на код плагина, иногда при копировании можно случайно добавить спецсимволы, которые повлияют на работу кода, достаточно их просто удалить или скопировать код предварительно в текстовый блокнот:
Все настроил, а в редакторе шрифт не поменялся
Шрифт загружается на опубликованной странице, проверять нужно на ней, в редакторе он останется таким же
Добавил новый текст в редакторе, а он без установленного шрифта
Не забывайте, что шрифт срабатывает по ранее настроенному классу, каждому текстовому виджету нужно прописать класс если он должен быть с вашим шрифтом.
