Шрифты для верстальщика: короткий мануал по подключению шрифтов на сайт

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

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

Шрифт может поддерживать или НЕ ПОДДЕРЖИВАТЬ русский язык (кириллицу). Поэтому прежде чем начинать работу со шрифтом убедись что он поддерживает русский.

Шрифты бывают платные и использование таких шрифтов без лицензии — опасно для твоей кармы и бизнеса твоих заказчиков. И то что ты скачиваешь какой то красивый шрифт с интернета БЕСПЛАТНО — не значит что он халявный.

Поэтому будь внимателен и изучай лицензию, по которой распространяется веб-шрифт. Информацию об этом можно узнать как минимум тремя способами:

  1. Проверка файла readme.txt. Большинство шрифтов поставляется в заархивированной папке и содержит файл readme.txt (также может называться license.txt, info.txt или как-то иначе). Если после загрузки шрифта в архиве нет файла лицензии EULA, это тревожный сигнал, свидетельствующий о том, что сайт не имеет права его распространять.
  2. Проверка сайта на наличие лицензионных условий. На трастовых сайтах лицензионное соглашение легко найти на странице скачивания шрифта или в нижней части контента.
  3. Поиск информации о шрифте в Google или Яндекс. Искать онлайн лучше всего по ключевому запросу название шрифта + лицензия (например: Times New Roman коммерческая лицензия).

Лицензии на использование шрифтов тоже бывают разные. Шрифты для личного и коммерческого использования — это разные вещи! не путай это.

Стандартные/безопасные шрифты

Стандартные — шрифты, которые уже установлены в большинстве операционных систем — хорошо знакомые Arial, Times New Roman и так далее.

Веб-безопасные шрифты — то же самое что и стандартные шрифты (шрифты, предустановленные многими операционными системами).

очень хороший ресурс, на котором опубликован сгруппированный список всех безопасных = стандартных шрифтов, который пригодится любому веб-разработчику:

https://www.cssfontstack.com/

Нестандартные шрифты

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

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

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

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

  1. TTF и OTF (TrueType/OpenType) — форматы, которые предоставляются с минимальным сжатием или совсем без него.
  2. WOFF (Web Open Font Format) — это расширенный формат шрифтов TrueType/OpenType, который добавляет сжатие и некоторые дополнительные метаданные.
  3. SVG — это векторное воссоздание шрифта, что делает его намного легче по размеру файла, а также делает его идеальным для мобильного использования. За более чем пятилетний срок работы верстальщиком ни разу не использовал этот способ подключения шрифтов.
  4. EOT (Embedded Open Type) — Этот формат был создан Microsoft (оригинальными новаторами @font-face) и является проприетарным файловым стандартом, поддерживаемым только IE. Фактически, это единственный формат, который IE8 и более ранние версии распознают при использовании @font-face. Не используется в настоящее время, так как поддержка IE — не нужна.

TTF и OTF сравнительно тяжёлые и в современном вебе разработчики отдают предпочтение более легковесным альтернативным форматам — WOFF и WOFF2.

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

Для простых проектов, чаще всего используют подключение через сервис: https://fonts.google.com/, но я стараюсь подключать шрифты локально — т е при помощи подготовленных шрифтовых файлов, которые хранятся на хостинге вместе с остальными файлами сайта. Так я минимизирую зависимость сайта от сторонних ресурсов.

Через сервис google-fonts

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

А для стилизации контента на страницах сайта просто пишешь стилевые правила типа:

body {
  font-family: "Roboto", "Arial", sans-serif;
}

Обрати внимание на то, что после названия шрифта, который ты подключил оыбчно добавляется дополнительный веб-безопасный шрифт, который будет использоваться на сайте, если основной файл шрифта не отработает! Это хорошая практика. Я всегда так делаю.

Подключение шрифта из файлов (локально)

Этот способ подключений шрифтов используется чаще всего. В этом случае мы работаем со шрифтовыми файлами в форматахTTF, OTF, WOFF и WOFF2.

Суть подключений сводится к работе с CSS-файлом в котором используется специальная конструкция:

/* roboto-regular - latin_cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-v30-latin_cyrillic-regular.eot');
  src: local('Roboto'),
       url('../fonts/roboto-v30-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/roboto-v30-latin_cyrillic-regular.woff2') format('woff2'),
       url('../fonts/roboto-v30-latin_cyrillic-regular.woff') format('woff'), 
       url('../fonts/roboto-v30-latin_cyrillic-regular.ttf') format('truetype'),
       url('../fonts/roboto-v30-latin_cyrillic-regular.svg#Roboto') format('svg');
}

Коментарий — это пояснительная пометка, что бы потомки-разработчики смоги понять что это за семейство шрифта. Полезно если вы изменили названия локальных файлов шрифта, или у вас склероз.

@font-face — конструкция для подключения локального шрифта (можно подключать шрифты с внешних ресурсов, но это делается крайне редко).

Внутри содержится несколько строк для указания параметров подключения шрифта:

  1. font-family — семейство шрифта,
  2. font-style — стиль шрифта,
  3. font-weight — жирность шрифта. Обрати внимание что если у подключаемого шрифта несколько вариантов font-weight, то все они хранятся в ОТДЕЛЬНЫХ файлах и подключаются с соответствующим параметром font-weight.
  4. font-display — Дескриптор font-display определяет то, как шрифт, подключённый через font face будет отображаться в зависимости от состояния загрузки страницы и самого файла со шрифтом. Этот дополнительный параметр, который относится к техникам оптимизации шрифта на сайте. Расскажу о нём чуть ниже в статье.
  5. src: url — пусть до шрифтового файла (относительный или абсолютный). Первым должен быть самый современный формат (который лучше всего использовать на сайте), а далее — запасные варианты.
  6. local — дополнительный параметр, который позволяет НЕ ЗАГРУЗАТЬ шрифт, если на комппьютере постетителя сайта они уже установлены.
  7. У этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.

Сами файлы шрифта будут выглядеть из кучи различных вариантов шрифтовых файлов.

Шрифты для верстальщика: короткий мануал по подключению шрифтов на сайт
Пример локальных файлов со шрифтами, подключаемых на сайт через @font-face.

Для своих проектов я чаще всего использую более современную вариацию подключения шрифтов на сайт — только WOFF и WOFF2.

Обрати внимание на пример кода ниже — подключаем два варианта жирности font-weight и они в ОТДЕЛЬНЫХ ФАЙЛАХ. Атрибут про локальные файлы указан, но он пустой.

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url('../fonts/roboto-v30-latin_cyrillic-regular.woff2') format('woff2'),
       url('../fonts/roboto-v30-latin_cyrillic-regular.woff') format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(''),
       url('../fonts/roboto-v30-latin_cyrillic-700.woff2') format('woff2'),
       url('../fonts/roboto-v30-latin_cyrillic-700.woff') format('woff');
}

Font-display: дополнительный параметр отображения шрифта на сайте

Дескриптор font-display определяет то, как шрифт, подключённый через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.

Минимум, необходимый для правильной работы с этим параметром сводится к пониманию вариантов указанных в этом правиле параметров:

  1. auto — поведение по умолчанию, зависит от браузера.
  2. block (Font block period) — если текст на странице стилизован этим шрифтом, он не отображается в течение 3 секунд, затем либо подставляется запасной шрифт и текст на странице становится видимым, либо файл шрифта успевает загрузиться и текст отображается в соответствии со стилями.
    Минус в том, что если текст на сайте отобразится с использованием запасного шрифта, а потом оригинальный шрифт всё таки загрузится — весь текст перерисовывается снова, при этом зачастую контент прыгает.
  3. swap (Font swap period) — сразу же отрисовывается запасной шрифт, после загрузки шрифта — повторный рендеринг.
  4. optional — текст не отображается в течение 100 миллисекунд, а затем отрисовывается запасным шрифтом. Даже если шрифт загрузится после этого, замена произойдёт только при обновлении страницы.

Чаще всего используется параметр swap, но если тебя бесит мелькание текста на сайте — используй параметр optional.

Как подобрать запасной шрифт

Чаще всего о добавлении запасного шрифта никто не задумывается и добавляют веб-безопасный шрифт в соответствии с наличием засечек у первоочередного шрифта, который используется в дизайне. Но если вы хотите избежать скачков текста (мелькание текста на странице, при её загрузке браузером) вам стоит подобрать наиболее подходящий запасной шрифт. Для этого я использую специальный сервис для подбора и сопоставления шрифтов: https://meowni.ca/font-style-matcher/

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

Что делать если нужного формата шрифта нет и на руках только TTF

Бывает и так, что шрифт эксклюзивный и предоставлен тебе только в форматах TTF или OTF, а тебе нужно в WOFF и WOFF2.

В этом случае приходится конвертировать шрифт. Тут лучше всего использовать этот генератор веб-шрифтов: https://www.fontsquirrel.com/tools/webfont-generator.

Этот сервис позволяет сконвертировать полученный от дизайнера шрифт из обычного формата в WOFF или WOFF2 или в оба формата сразу.

При желании можно выбрать настройки и более тонко настроить параметры будущего шрифтового файла — кликнув на вкладку expert/
Но чаще всего это не требуется. Я при конвертации просто выбираю базовую вкладку, потому что она содержит оптимальные настройки.

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

Подведём итог

  1. Чем меньше на сайте внешних зависимостей — тем лучше
  2. Используй современный формат шрифта, потому что он легче — быстрей грузится в брауер
  3. Добавляй и правильно подбирай запасной шрифт
  4. Осмысленно используй параметры в @font-face
  5. Если нет нужного формата шрифта для веба — используй конвертер.
Юрий Ронин