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

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

• https://fonts.google.com/
• http://allfont.ru/

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

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

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

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

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

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

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

Аналогично предыдущему коду, добавляете код из инструкции ниже в 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

1. Переходим на сайт https://allfont.ru/ и открываем понравившийся шрифт
2. На странице шрифта находим ссылку на сам шрифт и открываем его

3. Копируем все что начинается с @font-face

4. Переходи на Креатиум в раздел Плагины - Свой код - Код перед </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>

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

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

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