Если нужного шрифта нет на компьютере читателя, можно всё равно его показать: подключить свой файл через @font-face или взять готовый вариант с Google Fonts. Оба способа заставляют браузер один раз скачать файл шрифта и дальше использовать его как обычный, локально установленный.
В этом уроке
Попробуй прямо сейчас: поменяй имя шрифта в правиле @font-face (например, на "DrugoyShrift") так, чтобы оно перестало совпадать с именем в классе .custom - шрифт перестанет узнаваться, и текст вернётся к обычному запасному варианту sans-serif.
Свой файл шрифта: как работает @font-face
@font-face - это правило, которое регистрирует шрифт под именем, каким ты сам его назовёшь, и указывает браузеру, откуда скачать файл. После этого имя можно использовать в font-family точно так же, как имя любого установленного шрифта.
src: url("shrift.woff2") format("woff2"), url("shrift.ttf") format("truetype"); - несколько форматов через запятую: если браузер читателя не поддерживает woff2, он попробует следующий.
src: url("shrift.ttf") format("truetype"); - только один старый формат: файл будет заметно тяжелее, чем нужно, без явной причины для этого в 2026 году.
Готовый шрифт из Google Fonts
Не обязательно искать файл шрифта самому - Google Fonts уже подготовил тысячи шрифтов с готовым @font-face внутри. Нужно просто подключить одну ссылку в <head> - и дальше использовать имя шрифта в font-family как обычно.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"> - строка в <head>, дальше просто font-family: "Roboto", sans-serif;.
@import url("https://fonts.googleapis.com/css2?family=Roboto"); внутри CSS-файла - грузится последовательно, а не параллельно с остальными стилями, и заметно задерживает отрисовку страницы.
font-display: что показывать, пока шрифт загружается
Пока файл шрифта не скачался, браузеру нужно решить, что показывать читателю. Свойство font-display управляет этим: swap сразу показывает запасной шрифт и заменяет его на нужный, как только тот загрузится - это самый частый выбор, потому что текст виден с первой секунды.
font-display: swap; - текст сразу виден в запасном шрифте, без пустого места на странице.
/* font-display не указан */ - по умолчанию используется auto, и часть браузеров на короткое время делают текст невидимым, пока идёт загрузка.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Не указан font-display (используется auto по умолчанию) | В части браузеров текст на короткое время невидим, пока шрифт не загрузится | Добавить font-display: swap - запасной шрифт покажется сразу |
| Google Fonts подключены через @import вместо <link> | Загрузка шрифта блокирует и задерживает загрузку остального CSS - последовательно, а не параллельно | Использовать <link rel="stylesheet"> в <head>, а не @import |
| В @font-face указан только один формат файла | В части браузеров, не поддерживающих именно этот формат, шрифт не подключится вообще | Перечислить несколько форматов через запятую в src, начиная с woff2 |
| Опечатка или неверный путь в src: url(...) | Шрифт тихо не подключается, браузер использует следующий шрифт по списку - видимой ошибки на странице нет | Проверить путь и открыть вкладку Network в инструментах разработчика - там виден статус 404 |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Подключить свой файл | @font-face { font-family: "Имя"; src: url("шрифт.woff2") format("woff2"); } |
| Несколько форматов на всякий случай | src: url(...woff2) format("woff2"), url(...ttf) format("truetype"); |
| Подключить Google Fonts | <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Имя"> в <head> |
| Не прятать текст во время загрузки | font-display: swap; |
| Приватность (для аудитории ЕС) | Вместо прямой ссылки на Google можно скачать файлы шрифта и подключить через свой @font-face |
Коротко: отвечаем на вопросы
Шрифт подключил через @font-face, но он не применяется - в чём может быть проблема?
Чаще всего дело в неверном пути к файлу в src: url(...) - шрифт тихо не загружается и подставляется запасной вариант без видимой ошибки на странице. Стоит открыть вкладку Network в инструментах разработчика: если файл не найден, там будет виден статус 404.
Можно ли использовать шрифты из Google Fonts бесплатно в коммерческом проекте?
Да - все шрифты Google Fonts распространяются по открытым лицензиям (чаще всего SIL Open Font License, также встречаются Apache License и Ubuntu Font License) и разрешают бесплатное использование, в том числе в коммерческих проектах.
