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

Содержание

Добавляем шрифт с fonts.google.com (Для версий редактора до 4.4)Добавить шрифт со стороннего сервиса (Для версий редактора до 4.4)Добавляем шрифт с fonts.google.com (Для версий редактора 4.4 и выше)Добавить шрифт со стороннего сервиса (Для версий редактора 4.4 и выше)Особенности новой системы шрифтов в редакторе 4.4

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

Узнать какая версия у вашего сайта можно здесь:

или в редакторе:

Добавляем шрифт с fonts.google.com (Для версий редактора до 4.4)

Версия редактора до 4.4

Открываем:

https://fonts.google.com/

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

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

3. Нажимаете на кнопку Get Font

4. Нажимаем кнопку Get embed code

Копируем ссылку

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

Как добавить?

Чтобы добавить скрипт, перейдите в раздел "Плагины"

Выберите плагин “Свой код”

Код добавляете в поле Перед </head>.

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

<style type="text/css"> 
.myFonts *, .myFonts {
font-family: "Roboto", sans-serif !important ; 
}
</style>

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

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

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

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

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

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

До:

После:

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

Сложности с подключением

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

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

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

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

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

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

Как изменить толщину шрифтов через код


<style type="text/css">

.ThinMont *, .ThinMont {

font-family: 'Montserrat', cursive !important;

font-weight: 300; / условие: если класс ThinMont, то wght@300 /

}


.BoldMont *, .BoldMont {

font-family: 'Montserrat', cursive !important;

font-weight: 500; / условие: если класс BoldMont, то wght@500 /

}

</style>

Добавить шрифт со стороннего сервиса (Для версий редактора до 4.4)

Версия редактора до 4.4

Переходим на сайт, который предоставляет шрифты и открываем понравившийся шрифт

На странице шрифта находим ссылку на сам шрифт и открываем его

Копируем все что начинается с @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.

Добавляем шрифт с fonts.google.com (Для версий редактора 4.4 и выше)

В новом редакторе была изменена система шрифтов. Теперь можно полностью контролировать шрифты — добавлять свои (например, из Google Fonts), редактировать начертания, управлять толщиной.

Версия редактора 4.4 и выше

Перейдите на сайт https://fonts.google.com/

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

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

Нажимаете на кнопку Get Font

Нажимаем кнопку Get embed code

Выберите вкладку import и скопируйте код, который там есть без тегов <style>

Вернитесь в редактор и перейдите в раздел Страница - Шрифты и нажмите на кнопку Добавить шрифт. В самом низу появится новый шрифт с названием New font, у данного шрифта нужно нажать на карандаш, чтобы открыть настройки.

В первое поле добавляем код который копировали из Google Fonts.

Во второе поле добавляете название шрифта, его можете взять из поля CSS rules, при копировании данного поля пропадет font-family.

Добавить шрифт со стороннего сервиса (Для версий редактора 4.4 и выше)

Версия редактора 4.4 и выше

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

Порядок действия со своими шрифтами следующий:

Получаем ссылки на шрифты

Копируем код который есть ниже и меняем его под свой шрифт.

@font-face {
    font-family: 'newfont';
    src: url('newfont.woff2') format('woff2'), 
    url('newfont.woff') format('woff'),
    url('newfont.eot') format('eot'), 
    url('newfont.ttf') format('truetype');
}

Как работать с данным кодом:

Если какого либо формата нет, необходимо выделить строку целиком и удалить.

В вашем шрифте есть только формат woff. Тогда необходимо в @font-face удалить лишнее чтобы получилось следующее

@font-face {
    font-family: 'newfont';
    src: url('newfont.woff2') format('woff2');
}

Или в вашем шрифте есть только два формата, тогда получаем следующее

@font-face {
    font-family: 'newfont';
    src: url('newfont.woff2') format('woff2'),
url('newfont.ttf') format('truetype');
}

Обратите внимание на точку с запятой, она должна обязательно остаться в конце.

После копирования кода и удаления лишнего, необходимо вставить ссылки в соответствующие форматы. В font-family важно добавить название шрифта, с помощью этого мы сможем обратиться к шрифту.

@font-face {
    font-family: 'Forum Regular';
    src: url('https://files2.creatium.io/support-scripts/my-fonts/vela-sans/Forum-Regular.woff') format('woff')
}

Во втором поле дублируете название своего шрифта. Закрываете окно и выбираете шрифт из списка:

Особенности новой системы шрифтов в редакторе 4.4

Теперь стало возможным задавать толщину у текста

У сквозных секций пропал пункт настройки шрифта, теперь шрифт страницы распространяется и на сквозные секции.