Идет набор на XX поток Базового курса по GetCourse. Старт 26 июня. Подробности по ссылке.
Статья была полезной?
В этой статье рассмотрим поэтапно весь процесс подключения собственных произвольных шрифтов на странице, созданной в конструкторе.
Для подключения выбранного вами шрифта пройдём следующую последовательность шагов:
2. Загрузка шрифта в Файловое Хранилище
3. Создание CSS блока с шрифтом
3.1 Свойства для загрузки шрифта
1. Форматы шрифтов
Разные браузеры имеют свою поддержку форматов шрифтов. Например IE11 использует woff, а большинство других воспринимают otf (opentype). Следовательно, чтобы шрифты смотрелись хорошо во многих браузерах, нужно будет подключать несколько шрифтов одновременно.
Есть отличный сервис, который позволяет из одних форматов шрифта делать нужные, для примера возьмём шрифт MadelynFill формат otf (opentype) и сгенерируем шрифт для IE11 в формате woff.
Будем использовать генератор шрифтов — http://www.font2web.com/
1. Заходим на сайт http://www.font2web.com/
2. Нажимаем «Выбрать файл» (1), выбираем шрифт otf
3. Кликаем на картинку Convert and Download (2), начнётся скачивание архива со всеми шрифтами.
На данный момент нам потребуются шрифты в формате woff и otf. Формат otf у нас уже есть, потребуется второй — woff.
В архиве заходим в папку fonts и перемещаем шрифт формата woff в удобное место, например рядом с шрифтом otf.

2. Загрузка шрифта в Файловое Хранилище
Для того чтобы загрузить шрифт в Файловое Хранилище нужно сделать следующие шаги:
- Кликнуть на аватарку в меню;
- Перейти по ссылке «Файловое Хранилище»;
- Кликнуть на «Загрузить файлы», выбрать ваши шрифты и загрузить.

3. Создание CSS блока с шрифтом
Для того чтобы создать CSS блок, вам потребуется:
- Открыть конструктор с выбором блоков;
- Выбрать пункт «Вставка»;
- Кликнуть на CSS блок.
Результат — созданный блок.
Рекомендуем подключать стили всегда в шапке сайта (самым первым блоком), чтобы сами шрифты подгружались раньше.

3.1 Свойства для загрузки шрифта
- Открываем CSS блок
- Копируем и вставляем следующую конструкцию
@font-face {
font-family: 'Название шрифта';
}
В нашему случае название шрифта будет - MadelynFill, в итоге получим:
@font-face {
font-family: 'MadelynFill';
}
3. Сохраняем
Первую часть подключения шрифта в CSS блок мы завершили.

3.2 Шаблон пути шрифта
src: url('/fileservice/file/download/h/название-шрифта.otf/a/идентификатор/sc/номер') format('opentype'),
url('/fileservice/file/download/h/название-шрифта.woff/a/идентификатор/sc/номер') format('woff');
Откуда брать эти выделенные значения? Как раз во время загрузки шрифта в Файловое Хранилище мы их получили.
- Заходим в файловое хранилище
- Находим наш шрифт, внимательно смотрим на формат, к примеру находим otf (1)
- Нажимаем на его ID (2)
- На скриншоте мы видим нужные значения (Название шрифта - (3), идентификатор (4), номер (5)
Нужно внимательно смотреть на цифры, потому что у другого шрифта они могут быть другими.
Подменяем значения, которые мы видим, такую же процедуру делаем и со вторым форматом woff.


src: url('/fileservice/file/download/h/название-шрифта.otf/a/идентификатор/sc/номер') format('opentype'),
url('/fileservice/file/download/h/название-шрифта.woff/a/идентификатор/sc/номер') format('woff');
Данные пути вставляем в нашу общую конструкцию, в моём случае получаю следующий вид:
@font-face {
font-family: 'MadelynFill';
src: url('/fileservice/file/download/h/382043fad7a712894022f14504f30ea5.otf/a/13633/sc/498') format('opentype'),
url('/fileservice/file/download/h/4252a03bfcb1484fa6f5cf6b4f70c615.woff/a/13633/sc/232') format('woff');
}
Данная конструкция должна будет быть у вас в блоке CSS, сохраняем.
Здорово, самую сложную часть мы завершили!

4. Подключение шрифта определённому заголовку
Способ добавления стилей описан в статье «Оформление стилей элемента с кастомным классом».
Нужно будет в селекторе объявить шрифт — font-family: 'MadelynFill', sans-serif !Important;

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

5. Подключение шрифта на всю страницу
Общий селектор для подключения шрифта на всю страницу (все кнопки, текст, заголовки):
body .f-text,
body .f-header,
body .f-btn {
font-family: 'MadelynFill', sans-serif !important;
}

авторизуйтесь
Его так же нужно загружать в файловое хранилище? СПасибо
Для наиболее точных рекомендаций напишите, пожалуйста, по данному вопросу в техническую поддержку https://getcourse.ru/contacts .
К обращению необходимо приложить ссылки на шрифты, а также пример страницы, на которой планируется их применение.
И второй, не менее важный вопрос. Зачем вы постоянно заставляете обычных пользователей так глубоко погружаться в код? Геткурс должен ЭКОНОМИТЬ время, а не растягивать его! Так сложно сделать автоматический подгрузчик шрифтов из файла на пк, который автоматически расставлял и прописывал все CSS на сайте? Это огромное время занимает у ваших программистов?
У вас на платформе - куда не шагни надо в код погружаться. Честно, уже надоело
Для анализа ситуации напишите, пожалуйста, по этому вопросу в нашу техническую поддержку https://getcourse.ru/contacts . В обращении приложите поясняющие скриншоты и ссылки на примеры файлов.
Подскажите, а если необходимо установить шрифт на весь аккаунт Геткурса (уроки, сайт, виджеты, тренинги) - это возможно сделать?
Пожалуйста, направьте запрос с подробным описанием задачи в службу поддержки: https://getcourse.ru/contacts
Прилагаю скрин с попыткой повторить процедуру со шрифтом, как в вашем примере. Но, в идеале нужен шрифт Airfool.
Напишите нам в техническую поддержку, прикрепив ссылку на файл https://getcourse.ru/sprt_router/
В этом случае код будет примерно таким:
@font-face {
font-family: 'Шрифт1';
src: url('/fileservice/file/download/h/ec0a88079200.otf/a/139190/sc/75') format('opentype'),
url('/fileservice/file/download/h/88f3a2c93f.woff/a/139190/sc/146') format('woff');
}
@font-face {
font-family: 'Шрифт2';
src: url('/fileservice/file/download/h/abdccb673e5a1f9a.otf/a/139190/sc/339') format('opentype'),
url('/fileservice/file/download/h/2c2f94d27ca8.woff/a/139190/sc/287') format('woff');
}
Спасибо
Благодарим вас за обратную связь. Информация передана профильным специалистам.
Шрифт устанавливается аналогичным способом, описанным в статье. CSS-код нужно добавить в подробные настройки стиля блока http://joxi.ru/4AkJl7vio6XYJ2 ---> http://joxi.ru/52aOBa8IEObx7r.
Спасибо!
Разные браузеры поддерживают разные форматы шрифтов. Например IE11 использует woff, а большинство других воспринимают otf (opentype).
Чтобы шрифты смотрелись хорошо во многих браузерах, нужно будет подключать несколько файлов со шрифтами в разных форматах.
Вы можете найти нужный вам шрифт, например, на сайте https://fonts.google.com/ или https://google-webfonts-helper.herokuapp.com/fonts
и используя конвертор http://www.font2web.com/ изменить формат файла.
Еще вопрос, как узнать список шрифтов уже имеющихся на платформе, может не надо загружать или подобрать похожий.
Есть другой вариант подключения собственного шрифта через "темы" https://getcourse.ru/blog/358362
Необходимые шрифты вы можете загружать и по данной инструкции.
В моем случае необходимо загрузить разные шрифты:
Montserrat-Bolt
Montserrat-Black
Montserrat-BlackItalic
Montserrat-Medium
Montserrat-Thin
Montserrat-Regular
И т.д.
Мне необходимо проделать описанную операцию по каждому шрифту?
Вы можете загрузить сразу все нужные шрифты в файловое хранилище, затем в коде
@font-face {
font-family: 'Название шрифта';
}
прописать названия всех загруженных шрифтов и пути к ним. Подключать нужный шрифт к нужному заголовку нужно будет по отдельности.