Как применить собственный шрифт в аккаунте GetCourse

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

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

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

Разные браузеры поддерживают разные форматы шрифтов. Например, Internet Explorer 11 использует woff, а большинство других браузеров воспринимают otf (opentype). Следовательно, чтобы шрифт воспроизводился во многих браузерах, нужно подключить сразу несколько форматов шрифта.

Если шрифт представлен только в одном формате или нужного формата нет, вы можете использовать сторонний сервис, чтобы сгенерировать подходящий формат шрифта. Как это сделать, покажем на примере генератора шрифтов https://transfonter.org/.

Предположим, у вас есть шрифт в формате otf. Чтобы получить этот шрифт в формате woff:

1. Нажмите Add fonts и выберите шрифт в формате otf.
2. Отметьте чекбокс с форматом WOFF.
3. Нажмите Convert.
4. Нажмите Download и скачайте архив со шрифтом выбранного формата.
5. Разархивируйте скачанный шрифт, для удобства можете переместить форматы шрифта woff и otf в одну папку.

Далее загрузите форматы шрифта в файловое хранилище:

1. Перейдите в раздел «Профиль» — «Файловое хранилище».
2. Нажмите «Загрузить файлы».
3. Выберите и загрузите шрифт в форматах woff и otf.

Готово! Теперь данные шрифты можно применить к страницам аккаунта. О том, как это сделать, расскажем в следующих разделах ⬇

Подключить подготовленный шрифт на странице могут:

• владелец аккаунта,
• администратор,
• сотрудник с правом «Может управлять cms» (только для страниц сайта),
• сотрудник с двумя правами: «Может управлять блогом» и «Может управлять cms» (для страниц сайта и блога).

Для этого:

1. Добавьте на страницу блок «Вставка» — «CSS-код».

2. Кликните по блоку «CSS-код», скопируйте и вставьте в него следующий код:

@font-face {
font-family: 'Название шрифта';
src: url('/fileservice/file/download/h/название-шрифта.otf/a/идентификатор/sc/номер') format('opentype'), url('/fileservice/file/download/h/название-шрифта.woff/a/идентификатор/sc/номер') format('woff');
}

1. Выделенные жирным шрифтом значения замените параметрами вашего шрифта.
1. Для свойства font-family вместо 'Название шрифта' укажите имя подключаемого шрифта, который вы ранее загрузили в хранилище (в рассматриваемом примере — TypeWriterC).
   Подробнее о свойстве font-family вы можете прочитать в стороннем CSS-справочнике → по ссылке.

Где взять оставшиеся выделенные значения, рассмотрим на примере шрифта в формате otf.

1. Найдите шрифт в файловом хранилище и кликните по его ID.

1. Скопируйте ссылку на файл и вставьте в любой текстовый редактор (например, «Блокнот»).

1. Из ссылки на файл скопируйте нужные значения:

• название шрифта (1);
• идентификатор (2);
• номер (3).

1. Подставьте скопированные значения в предложенный код. Повторите действия для шрифта в формате woff.
   
   В итоге получится код следующего вида (пример для шрифта TypeWriterC):

@font-face {
font-family: 'TypeWriterC';
src: url('/fileservice/file/download/h/103ae4ce863c9e86a42beb065f993e02.otf/a/396702/sc/195') format('opentype'), url('/fileservice/file/download/h/8d58413eda8535545405c64219819b6b.woff/a/396702/sc/476') format('woff');
}

4. Сохраните изменения в CSS-блоке.

5. Чтобы применить шрифт для определенного элемента текста, обратитесь к существующим классам (примеры ниже). Или задайте свой класс элемента и обратитесь по нему, подробности в статье → «Оформление стилей элемента с кастомным классом».

Рассмотрим на примерах, как применить собственный шрифт для отдельных элементов текста.

1. В CSS-блоке добавьте и сохраните код с названием подключенного шрифта:

.f-header {
font-family: 'Название шрифта', sans-serif !Important;
}

1. Чтобы шрифт применился ко всем кнопкам, текстам и заголовкам на странице, в CSS-блоке используйте код:

.f-text, .f-header, .f-btn, .f-description, .f-desc, .f-name, .f-subheader, .title { font-family: 'Название шрифта', sans-serif !important; }

Установить произвольный шрифт в виджете могут:

• владелец аккаунта,
• сотрудник или администратор с правом «Может управлять виджетами».

Для этого:

1. Составьте код аналогичный тому, который добавляется в блок «CSS-код» на странице. Подробности рассказывали в предыдущем разделе статьи → «Как подключить шрифты на странице».
2. В виджете нажмите «Стиль» — «Подробные настройки».

3. Вставьте код и сохраните изменения.

Результат:

Установить собственный шрифт в отдельном уроке могут:

• владелец аккаунта,
• администратор,
• сотрудник с правами для работы в тренинге.

Собственный шрифт в этом случае подключается так же, как и на страницу сайта или блога — с помощью кода, вставленного в CSS-блок. Подробности рассказывали в разделе выше → «Как подключить шрифты на странице».

Установить произвольный шрифт для аккаунта могут:

• владелец аккаунта,
• администратор с правом «Может настраивать аккаунт».

Для этого:

1. Обращаясь к нужным классам элементов, составьте код аналогичный тому, который добавляется в блок «CSS-код» на странице. Подробности рассказывали в предыдущем разделе статьи → «Как подключить шрифты на странице».
2. Код с классами элементов, для которых нужно подключить шрифты, заключите в теги <style>...</style>.
3. Перейдите в раздел «Профиль» — «Настройки аккаунта» — вкладка «Настройки».

4. Добавьте код в поле «Дополнительные теги для HEAD» и сохраните изменения. Дождитесь, пока код применится к элементам аккаунта.

Результат:

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

• «Как использовать системные шрифты на сайте и в блоге» — в статье вы узнаете, как применить системные шрифты на страницах, в записях блога или в отдельных блоках.
• «Темы: как изменить оформление тренингов или страниц аккаунта» — в статье описано, как с помощью темы применить к страницам аккаунта шрифты из коллекции Google Fonts.