Что такое веб-шрифты и зачем они нужны?
Веб-шрифт — это файл шрифта, который ваш сайт отправляет в браузер посетителя. Благодаря ему текст выглядит так, как вы задумали, даже если у посетителя этот шрифт никогда не был установлен.
Как работают веб-шрифты
Когда пользователь открывает вашу страницу, браузер читает CSS, определяет, какой шрифт нужен, и загружает файл с вашего сервера. Затем он отрисовывает текст этим шрифтом. Всё это происходит автоматически, и посетителю ничего устанавливать не нужно.
Веб-шрифты или системные шрифты?
Системные шрифты уже есть на устройстве посетителя, например Arial, Georgia или San Francisco. Их не нужно загружать, поэтому они самый быстрый вариант. Минус в том, что внешний вид меняется от устройства к устройству, и немногие из них подойдут под ваш бренд.
- Выбирайте веб-шрифт, если ваш бренд, заголовки или дизайн опираются на определённое начертание.
- Выбирайте системные шрифты, если скорость важнее всего, например в панелях управления или внутренних инструментах.
- Комбинируйте их: используйте веб-шрифт для заголовков и системный шрифт для основного текста.
Сколько веб-шрифты стоят в скорости?
Каждый файл шрифта — это ещё одна загрузка, и текст может появиться с задержкой или сместиться, пока файл загружается. Хорошо подготовленный веб-шрифт снижает эту нагрузку. Используйте WOFF2, удаляйте ненужные символы и загружайте только те начертания, которые реально применяете. Наше руководство по ускорению загрузки веб-шрифтов описывает каждый шаг.
Самостоятельный хостинг или сервис шрифтов?
Такие сервисы, как Google Fonts и Adobe Fonts, хранят файлы за вас. Самостоятельный хостинг означает, что файлы лежат на вашем собственном сервере. Так вы контролируете кеширование и скорость, а браузеры посетителей не обращаются к сторонним серверам. Это важно с точки зрения конфиденциальности: в 2022 году немецкий суд вынес решение против сайта, который загружал Google Fonts с серверов Google без согласия пользователей.
Перед самостоятельным хостингом прочитайте лицензию шрифта. Наше руководство по лицензированию веб-шрифтов объясняет, на что обратить внимание.
С чего начать
Возьмите шрифт, на использование которого у вас есть лицензия, и обработайте его в Генераторе веб-шрифтов. Вы получите готовые к веб-использованию файлы и CSS, а наше руководство покажет, как добавить их на сайт.
