Форматы и способы подключения шрифтов

EmbeddedOpenType (EOT) — формат шрифта полезный для рендера шрифтов в старых версиях IE. Если вам не нужно поддерживать IE8 и ниже, то лучше отказаться от этого формата.
TrueType (TTF) — формат шрифта полезный для расширения поддержки старых браузеров, особенно мобильных при необходимости.
Scalable Vector Graphics (SVG) — формат векторного воссоздания шрифта. Это единственный подходящий формат для мобильных версий браузера Safari версии 4.1 и ниже. Шрифты SVG в настоящее время не поддерживаются другими браузерами.
Web Open Font Format (WOFF) — формат-обертка для шрифтов True Type и Open Type. Формат сжимает файлы шрифтов и поддерживается во всех современных браузерах.
Web Open Font Format 2 (WOFF2) обновление для оригинального формата WOFF. Обеспечивает меньший размер файлов и лучшую производительность в современных браузерах.

Какой формат использовать?

Если ваша целевая аудитория использует современные браузеры, вы можете использовать @font-face, используя форматы шрифтов WOFF и WOFF2. Эти форматы обеспечивают хорошее сжатие и позволяют работать с меньшим количеством файлов в коде.

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

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

Способы добавления шрифтов на страницу

При указании семейства шрифтов в CSS браузер пользователя будет искать это семейство на локальной машине пользователя. По сколько часто при создании сайтов мы хотим использовать шрифты с определенным дизайном, мы должны добавить их в проект. Сделать это можно тремя способами.

link

Подключить шрифт с внешнего ресурса в HTML документе, использовав для тег link. Например, вот пример подключения шрифта Spectral сервиса Google Fonts.

<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,700;1,500&display=swap" rel="stylesheet"/>

import

Создать ссылку для подключения шрифтов мы так же можем внутри CSS файла, используя at правило import.

@import url("https://fonts.googleapis.com/css2family=Playfair+Display&display=swap");

font-face

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

@font-face {
font-family: "FontName";
src: url("path/filename.eot");
src: url("path/filename.eot?#iefix") format("embedded-opentype"), url("path/filename.woff2")
format("woff2"), url("path/filename.woff") format("woff"), url("path/filename.ttf")
format("truetype");
}

Если необходимо поддерживать только современные браузеры, стили можно сократить до:

@font-face {
font-family: "FontName";
src: url("path/filename.woff2") format("woff2"), url("path/filename.woff")
format("woff");
}

Особенности загрузки шрифтов

Используя веб-шрифты, помните что браузеру конечного пользователя нужно время, чтобы подключить нужный файл стилей. При слабом интернете со стороны пользователя, это негативно скажется на скорости загрузке сайта. Раньше стандартным поведением браузера было сначала загрузить запасные шрифты, а когда подгрузиться файл пользовательских шрифтов, резкой вспышкой изменить шрифты на странице. Такое поведение получило название Flash Of Unstyled Text.

В наши дни браузеры по умолчанию скрывают текст перед загрузкой пользовательских шрифтов. Важно знать, что разработчики могут управлять поведением загрузки шрифтов при помощи свойства font-display. Свойство применяется к правилу @font-face, которое определяет пользовательские шрифты. Изменяя значение свойства мы можем указать браузеру как именно стоит загружать шрифты:

@font-face {
font-family: "FontName";
src: url("path/filename.woff2") format("woff2"), url("path/filename.woff")
format("woff");
font-display: fallback;
}

Возможные значения:

auto(значение по умолчанию): позволяет браузеру использовать значение умолчанию, который для каждого браузера свое. Чаще всего выполняется как значение block.
block: браузер скрывает страницы, пока пользовательский шрифт не загрузиться полностью.
swap: браузер использует резервный шрифт для отображения текста до тех пор, пока пользовательский шрифт не будет полностью загружен. Смена шрифта резервного шрифта на пользовательский происходит в формате вспышки.
fallback: значение представляет собой баланс между auto и swap. Браузер временно скроет текст примерно на 100 миллисекунд, и если шрифт еще не получен, он будет использовать резервный текст. Как только шрифт будет загружен, он перейдет к новому шрифту, растянув переход по времени.
optional: указывает браузеру сначала скрыть текст, а затем перейти к резервному шрифту, пока пользовательский шрифт не станет доступен для использования. Однако это значение предоставляет браузеру решать, использовать загружаемые шрифты или нет. В качестве определяющего фактора используется параметр скорости соединения пользователя. И пользователи с более медленным соединением с меньшей вероятностью получат загружаемые шрифты.