Как размещать шрифты локально вместо использования Google Fonts

Зачем самостоятельно размещать Google Fonts?

Google Fonts упростил хорошую типографику. Добавьте таблицу стилей, выберите несколько начертаний — и страница готова. Годами это было разумным вариантом по умолчанию для небольших команд.

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

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

Во-вторых, возникает вопрос приватности. Запрос шрифта может раскрыть третьей стороне IP-адрес пользователя, user agent, контекст политики referrer и информацию о времени запроса. Google Fonts заявляет, что не устанавливает cookies через Fonts API, но «без cookies» — не то же самое, что «без персональных данных». В рамках GDPR IP-адрес все еще может быть персональными данными в конкретном контексте.

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

При правильной реализации это также часто улучшает производительность. Ключевое слово — «правильной». Если просто скопировать шесть файлов шрифтов в /assets/fonts/ и загружать их все на каждой странице, результат может быть хуже, чем при использовании размещенного сервиса. Если вам нужен более широкий контекст производительности, наша предыдущая статья о том, почему веб-шрифты по-прежнему остаются самым простым улучшением производительности на большинстве сайтов, разбирает типичные паттерны лишней нагрузки.

Что меняется при самостоятельном размещении

Когда вы используете 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=Inter:wght@400;600&display=swap" rel="stylesheet">

Сначала браузер запрашивает CSS с fonts.googleapis.com, а затем скачивает файлы шрифтов с fonts.gstatic.com.

При самостоятельном размещении страница должна запрашивать и CSS, и файлы шрифтов с вашего собственного домена:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Это убирает сторонний запрос шрифта. Но также делает вас ответственными за выбор форматов файлов, заголовки кеширования, запасные шрифты и обновления.

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

Шаг 1: Проведите аудит того, что вы действительно используете

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

Типичному маркетинговому сайту могут понадобиться:

• Regular 400 для основного текста
• Semibold 600 или bold 700 для заголовков и кнопок
• Italic 400 только если дизайн действительно использует курсив
• Только латиница, если сайт не поддерживает больше языков

Относитесь с осторожностью к старым настройкам дизайн-системы по умолчанию. Многие сайты загружают 300, 400, 500, 600, 700, курсивы и несколько письменностей просто потому, что кто-то однажды выбрал их в селекторе шрифтов.

В браузерном DevTools откройте панель Network, отфильтруйте по «font», перезагрузите страницу и проверьте, какие файлы запрашиваются. Затем изучите CSS на предмет использования font-weight. Если ваш CSS никогда не использует 300, не размещайте 300.

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

Шаг 2: Скачайте правильные файлы шрифтов

Google Fonts предлагает шрифты с открытым исходным кодом. Их можно скачать с сайта Google Fonts или из соответствующего репозитория проекта шрифта. Проверьте лицензию, но большинство Google Fonts распространяются по открытым лицензиям, таким как SIL Open Font License или Apache License.

Для веба предпочитайте WOFF2. Он широко поддерживается современными браузерами и обычно значительно меньше TTF или OTF. В 2026 году прямая отдача TTF браузерам редко оправдана для публичных сайтов.

Разумная структура каталогов выглядит так:

/public
  /fonts
    inter-latin-400.woff2
    inter-latin-600.woff2
    inter-latin-700.woff2

Используйте описательные имена файлов. Через шесть месяцев font.woff2 будет раздражать. inter-latin-600.woff2 скучно, но полезно.

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

Шаг 3: Создавайте подмножества шрифтов там, где это уместно

Subsetting означает удаление символов, которые вам не нужны. Полный шрифт может включать латиницу, кириллицу, греческий, вьетнамский, символы и множество возможностей OpenType. Если вашей англоязычной посадочной странице нужны только латинские символы, подмножество может быть значительно меньше.

Есть два распространенных подхода:

1. Использовать готовое подмножество от поставщика шрифта или из репозитория.
2. Создать собственное подмножество с помощью инструмента для шрифтов, например pyftsubset из fonttools.

Для многих команд готовых латинских подмножеств достаточно. Пользовательское создание подмножеств полезно, когда у вас есть очень ограниченные страницы, например отдельная кампания с небольшим объемом текста, или продуктовый UI с предсказуемым покрытием символов.

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

Шаг 4: Напишите правила @font-face

Минимальная локальная настройка выглядит так:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Здесь важны несколько деталей.

Используйте font-display: swap для большинства контентных сайтов. Это говорит браузеру быстро показать текст запасным шрифтом, а затем заменить его веб-шрифтом, когда тот загрузится. Так вы избегаете худшей версии FOIT: вспышки невидимого текста.

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

Правильно сопоставляйте насыщенности. Если ваш CSS запрашивает font-weight: 500, но вы определили только 400 и 700, браузер может синтезировать промежуточную насыщенность. Это не всегда ужасно, но может выглядеть непоследовательно.

Шаг 5: Удалите внешние вызовы Google Fonts

После добавления локального CSS шрифтов удалите старые удаленные вызовы из ваших шаблонов.

Ищите:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?..." rel="stylesheet">

Также проверьте:

• Настройки темы в CMS-платформах
• Панели типографики в конструкторах страниц
• Сторонние виджеты
• Tag managers
• Старые CSS-импорты, такие как @import url('https://fonts.googleapis.com/...')

Последний пункт встречается часто. CSS @import для шрифтов обычно хуже для производительности, потому что задерживает обнаружение ресурсов. Если вы размещаете шрифты самостоятельно, определяйте их напрямую в основном CSS или в CSS-файле шрифтов, который загружается рано.

Работа над приватностью часто проваливается потому, что команды исправляют очевидный шаблон, но пропускают скрипты, виджеты и устаревшие встраивания. Такой же паттерн встречается в работе с согласием; наше руководство о том, что изменилось для cookies в 2026 году, будет полезным дополнением, если вы шире сокращаете стороннюю поверхность.

Шаг 6: Настройте заголовки кеширования

Файлы шрифтов — статические ресурсы. Их следует кешировать агрессивно, если имена файлов версионируются или содержат хеш содержимого.

Хороший production-заголовок:

Cache-Control: public, max-age=31536000, immutable

Используйте долгоживущее immutable-кеширование только если URL меняется при изменении файла. Например:

inter-latin-400.a8f3c2.woff2

или версионированный путь:

/fonts/v2/inter-latin-400.woff2

Если вы перезапишете /fonts/inter-latin-400.woff2 без изменения URL, некоторые пользователи могут долго хранить старый файл. Это нормально — пока не перестает быть нормальным. Версионирование устраняет проблему.

Также отдавайте шрифты с корректным MIME-типом:

Content-Type: font/woff2

Большинство современных хостинг-платформ обрабатывают это автоматически, но проверить все равно стоит.

Шаг 7: Рассмотрите preload только для критически важного шрифта

Preload может помочь браузеру раньше обнаружить важный шрифт:

<link rel="preload" href="/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>

Используйте это умеренно. Предзагружайте основной шрифт текста выше первого экрана, а не каждую насыщенность. Чрезмерный preload конкурирует с CSS, изображениями и JavaScript.

Даже для шрифтов с того же origin добавляйте crossorigin в preload шрифтов. Загрузка шрифтов использует CORS mode, и его отсутствие может приводить к повторным загрузкам в некоторых конфигурациях.

Если не уверены — тестируйте. Не копируйте preload по привычке только потому, что так сказано в чек-листе.

Шаг 8: Проверьте приватность и производительность

Тестирование простое.

Откройте DevTools, перезагрузите страницу с отключенным кешем и отфильтруйте панель Network по:

• fonts.googleapis.com
• fonts.gstatic.com
• .woff2
• font

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

Затем протестируйте с холодным и теплым кешем. При первом посещении шрифты должны скачаться один раз. При последующих посещениях они должны приходить из памяти или дискового кеша в зависимости от браузера.

Проверьте сдвиг макета, когда шрифт подменяется. Если заголовки прыгают, метрики запасного шрифта слишком сильно отличаются от веб-шрифта. Видимый сдвиг можно уменьшить, выбрав более близкий запасной шрифт или используя новые CSS-переопределения метрик шрифта, такие как size-adjust, ascent-override, descent-override и line-gap-override. Это более продвинутые возможности, но они полезны для отполированных интерфейсов.

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

Распространенные ошибки, которых стоит избегать

Размещение слишком многих насыщенностей

Это самая частая ошибка. Двух насыщенностей часто достаточно. Трех обычно более чем хватает. Пять — признак проблемы в дизайн-системе, если у вас нет сильной причины.

Забытый курсив

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

Сохранение старой ссылки на Google CSS

Это сводит всю идею на нет. После миграции ни один запрос шрифта не должен уходить в Google, если только его не внедряет другой компонент.

Отдача шрифтов без долгосрочного кеширования

Самостоятельное размещение дает вам контроль. Используйте его. Шрифты — идеальные кандидаты для длительного срока кеширования.

Игнорирование юридической работы и документации

Если ваша политика конфиденциальности ранее упоминала Google Fonts или стороннюю загрузку шрифтов, обновите ее после миграции. Если вы ведете реестр обработки данных, обновите и его. Техническое изменение и запись о compliance должны совпадать.

<!-- tool-cta:start -->

💡 Попробуйте это: Преобразуйте файлы TTF, которые вы скачали из Google Fonts, в WOFF2 для самостоятельного хостинга плюс CSS с помощью Webfont Generator.

<!-- tool-cta:end -->

Простой чек-лист миграции

1. Перечислите семейства шрифтов, насыщенности, стили и письменности, которые вы действительно используете.
2. Скачайте WOFF2-файлы и подтвердите лицензию.
3. Создайте подмножества шрифтов, если у сайта ограниченные языковые потребности.
4. Добавьте локальные правила @font-face с font-display: swap.
5. Удалите все ссылки Google Fonts link, preconnect и @import.
6. Отдавайте шрифты с собственного домена с долгоживущими заголовками кеширования.
7. Предзагружайте только самый важный шрифт выше первого экрана, если тестирование это подтверждает.
8. Убедитесь в DevTools, что запросов к Google Fonts не осталось.
9. При необходимости обновите документацию по приватности.

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