Как подключить шрифт из Google Fonts или AllFont

У нас нет возможности загрузить свой файл шрифта, но можно подключить его с других сервисов, например:

Заметка: шрифт можно подключить, только если он есть на одном из этих ресурсов и является бесплатным. В целом, подключение шрифта, которого нет у нас в этом списке

 

 

Выглядит следующим образом:

1. Находите нужный вам шрифт или ближайший, похожий к нему, предварительно можете отфильтровать и выбрать только Cyrillic.

 

2. Нажимаете на окошко с нужным шрифтом:

3. Нажимаете на кнопку с плюсиком:

 

4. Копируете ссылку:

 

5. И добавляете ее в плагин "Свой код", в поле "Перед ".

Аналогично предыдущему коду, добавляете код из инструкции ниже в HEAD, сразу после предыдущего скрипта, но предварительно данное CSS свойство нужно добавить в специальные тэги и добавить !important для повышения приоритета собственных стилей.

В итоге получится такая конструкция (Код из Google Fonts + код из инструкции):

Пример в плагине инструкции с шрифтом: 'Reggae One', обратите внимание, что у вас будет свое название шрифта в параметре font-family: 'Название вашего шрифта' , получить его можно там же, где и код в шаге 4 (cм скриншот ниже). Например смотрим название для шрифта Merriweather

 

Меняем в коде строчку: font-family: 'Reggae One', cursive !important;

на font-family: 'Merriweather', cursive !important;

 

6. Сохраняете изменения в настройках сайта и переходите в редактор нужной страницы. В редакторе, например, у виджета "Текст", указываете класс myFonts.

 

 

Публикуете станицу или же выполняете предпросмотр. В результате у текста начинает отображаться выбранный вами шрифт.

До:

После:

 

Если вы сделали все шаги, но шрифт так и не изменился, в конце инструкции есть самые частые ошибки, которые допускаются в процессе настройки.

 

Добавляем шрифт с allfont.ru

 

  1. Переходим на сайт https://allfont.ru/ и открываем понравившийся шрифт
  1. На странице шрифта находим ссылку на сам шрифт и открываем его
  1. Копируем все что начинается с @font-face
  1. Переходи на Креатиум в раздел Плагины - Свой код - Код перед

 


 

5. Сохраняете изменения в настройках сайта и переходите в редактор нужной страницы. В редакторе, например, у виджета "Текст", указываете класс myFonts.

 

 

Пример вы может увидеть тут https://f22347.creatium.site/fontfamily

 

Столкнулись с трудностями при подключении?

 

Все сделал по инструкции, но шрифт не поменялся

Обратите внимание на код плагина, иногда при копировании можно случайно добавить спецсимволы, которые повлияют на работу кода, достаточно их просто удалить или скопировать код предварительно в текстовый блокнот:

 

Все настроил, а в редакторе шрифт не поменялся

Шрифт загружается на опубликованной странице, проверять нужно на ней, в редакторе он останется таким же

Добавил новый текст в редакторе, а он без установленного шрифта

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

Не нашел нужного шрифта в указанных сервисах