Добавление шрифтов на веб-сайт

Веб-шрифты из Adobe Fonts можно использовать на веб-сайтах, в HTML-рассылках, в статьях в формате AMP Google, а также во многих проектах других типов, поддерживающих веб-шрифты.

 

Выбор шрифтов для использования

Начните с просмотра библиотеки шрифтов. Необходимую языковую поддержку можно выбрать в раскрывающемся меню ЯЗЫКИ И ПИСЬМЕННОСТИ.

Страница обзора шрифтов Adobe Fonts

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

Просмотр тегов Adobe Fonts

Создание веб-проекта

Если желаемый шрифт найден, нажмите кнопку </>, чтобы добавить семейство в веб-проект.

Создание веб-проекта из карты шрифта

Вы также можете щелкнуть название шрифта, чтобы открыть страницу семейства и отобразить все типы насыщенности и стили шрифта, доступные для использования. Затем нажмите </> «Добавить в веб-проект» в верхней части страницы, чтобы добавить семейство в веб-проект.

Добавление нового проекта веб-шрифта на странице семейства шрифтов.

В окне «Добавить шрифты в веб-проект» можно назвать веб-проект и выбрать шрифты для включения.

  1. Щелкните меню и выберите «Создать проект».
  2. Назовите веб-проект.
  3. Используйте флажки, чтобы выбрать типы насыщенности и стили шрифта, включаемого в проект.
  4. Создайте проект.

Позже вы сможете вносить изменения в настройки проекта на странице Мои шрифты Adobe Fonts.

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

Скопируйте код вставки и добавьте его к тегу <head> на своем веб-сайте.

Нажмите «Готово», чтобы закрыть окно веб-проекта и продолжить просмотр.  Чтобы добавить в проект дополнительные шрифты, нажмите кнопку </> на другом семействе шрифтов, затем в меню выберите название вашего проекта (вместо «Создать проект»).

Настройка веб-проекта

Веб-проект и все добавленные к нему шрифты будут указаны на странице Мои шрифты Adobe Fonts.

Нажмите кнопку «Изменить проект», чтобы изменить насыщенность и стили шрифтов, полностью удалить семейство веб-шрифтов из проекта или указать параметр font-display. Кроме того, можно изменить набор символов в редакторе веб-проекта, определяющий языковую поддержку проекта.  

wp-page

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

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

Параметры font-display позволяют задавать режим загрузки веб-шрифтов в браузере и применение их на веб-сайте. Более подробную информацию можно найти на странице справки о параметрах font-display.

По окончании настройки проекта нажмите «Сохранить изменения», чтобы сохранить проект. Обновления будут доступны на веб-сайте через несколько минут.

Применение шрифтов в CSS

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

wp-page

Логотип Adobe

Вход в учетную запись