⚙️

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

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

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

image

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

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

image

image

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

image

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

image

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

image

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

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

<style type="text/css"> 
.myFonts *, .myFonts { 
font-family: 'Reggae One', cursive !important; 
}
</style>

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

image

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

image

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

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

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

image

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

До:

image

После:

image

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

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

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

<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>

image

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

image

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

image

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

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

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

image

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

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

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

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

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

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