Главная / Блог / Google Fonts локально

Google Fonts: как скачать и подключить локально на сайте

Q: Законно ли использовать Google Fonts на сайте в России?

Подключение через CDN (fonts.googleapis.com) передаёт IP-адрес посетителя на серверы Google — это трансграничная передача персональных данных. Локальное подключение полностью легально, так как данные не покидают ваш сервер.

Q: Как узнать, подключены ли Google Fonts через CDN?

Откройте код страницы (Ctrl+U) и поищите fonts.googleapis.com или fonts.gstatic.com. Если нашли — шрифты загружаются с серверов Google.

Q: Нужно ли платить за Google Fonts?

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

Q: Какой формат шрифта лучше использовать?

WOFF2 — лучший формат: максимальное сжатие, поддержка 97%+ браузеров. Для совместимости со старыми браузерами добавьте WOFF как fallback.

19 февраля 2026 Актуально на: февраль 2026 8 мин чтения

Коротко:

Google Fonts через CDN передаёт IP посетителей в Google — нарушение ФЗ-152
Локальное подключение быстрее (нет внешних запросов) и безопаснее
3 способа: ручной, google-webfonts-helper, fontsource
Весь процесс — 15–30 минут

Зачем подключать Google Fonts локально

Когда вы подключаете шрифт через <link href="https://fonts.googleapis.com/...">, браузер посетителя отправляет запрос на серверы Google. Вместе с запросом передаётся IP-адрес пользователя — это персональные данные по ФЗ-152.

Три причины перейти на локальное подключение

Причина	Подробности
Р¤Р—-152	Передача IP на серверы Google — трансграничная передача ПДн без согласия пользователя. Штрафы за нарушение выросли в 20 раз с мая 2025
Скорость	Один запрос на fonts.googleapis.com + один на fonts.gstatic.com = 2 дополнительных DNS-запроса + TCP-соединения. Локальные шрифты грузятся с вашего сервера за 1 запрос
Надёжность	Если Google CDN недоступен (блокировка, сбой) — текст отображается системным шрифтом. Локальные шрифты работают всегда

В Германии суд в Мюнхене (дело Az. 3 O 17493/20, январь 2022) признал встраивание Google Fonts через CDN нарушением GDPR и назначил компенсацию 100 € истцу. В России аналогичный риск обычно связывают с нарушением локализации по ч. 5 ст. 18 ФЗ-152 и ч. 8 ст. 13.11 КоАП: для юрлиц штраф составляет 1–6 млн ₽, повторно — 6–18 млн ₽.

Как проверить, что шрифты загружаются с Google

Откройте ваш сайт в Chrome
Нажмите Ctrl+U (просмотр кода страницы)
Найдите (Ctrl+F): fonts.googleapis.com или fonts.gstatic.com
Если нашли — шрифты загружаются с Google

Альтернативный способ: откройте DevTools (F12) → вкладка Network → обновите страницу → найдите запросы к fonts.googleapis.com.

Или запустите сканер Reova — он автоматически обнаружит все внешние ресурсы, включая Google Fonts.

Способ 1: скачать с Google Fonts (ручной)

Самый простой способ, подходит для 1–2 шрифтов.

Шаг 1. Скачайте шрифт

Откройте fonts.google.com
Найдите нужный шрифт (например, Inter)
Нажмите «Download family» (кнопка в правом верхнем углу)
Скачается ZIP-архив с файлами .ttf

Шаг 2. Конвертируйте в WOFF2

TTF-файлы слишком тяжёлые для веба. Конвертируйте в WOFF2:

Онлайн: cloudconvert.com
Или: transfonter.org (также генерирует CSS)

Шаг 3. Разместите на сервере

Создайте папку /fonts/ на сайте и загрузите WOFF2-файлы:

your-site/
  fonts/
    inter-regular.woff2
    inter-medium.woff2
    inter-bold.woff2
  css/
    style.css

Шаг 4. Подключите через CSS

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

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

Шаг 5. Удалите старое подключение

Найдите и удалите из HTML:

<!-- УДАЛИТЬ: -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Способ 2: google-webfonts-helper (рекомендуется)

Сервис google-webfonts-helper автоматически генерирует CSS и даёт ссылки на WOFF2.

Откройте gwfh.mranftl.com/fonts
Найдите шрифт в списке (например, Inter)
Выберите нужные начертания (regular, medium, bold)
Выберите кодировки: latin + cyrillic
Укажите путь к шрифтам на сайте (например, ../fonts/)
Скопируйте готовый CSS
Скачайте ZIP с файлами шрифтов

Этот способ — самый быстрый. За 5 минут вы получаете готовый CSS с правильными @font-face и все нужные файлы.

Способ 3: fontsource (npm)

Для проектов на React, Vue, Next.js и других фреймворках:

# Установка
npm install @fontsource/inter

# Р’ JS/TS С„Р°Р№Р»Рµ
import '@fontsource/inter/400.css';
import '@fontsource/inter/700.css';

Fontsource автоматически генерирует @font-face, кладёт файлы в node_modules и подключает при сборке. Никаких внешних запросов.

CSS: правильный @font-face

Полный пример с fallback на WOFF для старых браузеров:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-regular.woff2') format('woff2'),
       url('/fonts/inter-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F, U+0000-00FF;
}

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

Важные параметры

Свойство	Значение	Зачем
`font-display: swap`	swap	Текст отображается сразу системным шрифтом, затем подменяется. Улучшает LCP
`unicode-range`	U+0400-04FF, U+0000-00FF	Загружать только кириллицу и латиницу. Экономит трафик
`format('woff2')`	woff2	Самый сжатый формат. Поддержка 97%+ браузеров

Оптимизация загрузки шрифтов

1. Preload критических шрифтов

Добавьте в <head> для основного шрифта:

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

Прелоадите только 1–2 самых важных начертания. Остальные загрузятся по мере необходимости.

2. Минимум начертаний

Каждое начертание — отдельный файл (15–30 КБ). Используйте только нужные:

Regular (400) — обязательно
Medium (500) или Semibold (600) — для подзаголовков
Bold (700) — для акцентов

3 начертания — оптимальный набор. 5+ — уже избыточно для большинства сайтов.

3. Кэширование

Настройте длительное кэширование для шрифтов (они редко меняются):

# nginx
location /fonts/ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

# .htaccess (Apache)
<FilesMatch "\.(woff2|woff)$">
  Header set Cache-Control "max-age=31536000, public, immutable"
</FilesMatch>

Проверка результата

После замены убедитесь, что всё работает:

1. Визуальная проверка

Откройте сайт — шрифт должен выглядеть так же, как раньше.

2. DevTools

Откройте F12 → Network → обновите страницу
Отфильтруйте по «Font»
Убедитесь: шрифты загружаются с вашего домена, не с fonts.gstatic.com

3. Код страницы

Ctrl+U → поиск по fonts.googleapis.com — не должно быть ни одного упоминания.

4. Автоматическая проверка

Запустите сканер Reova — он проверит, остались ли внешние ресурсы Google.

5. PageSpeed

Проверьте скорость до и после на PageSpeed Insights. Обычно локальные шрифты дают +5–15 баллов.

Проверьте, какие внешние ресурсы использует ваш сайт

Наш сканер автоматически обнаружит Google Fonts, Analytics, reCAPTCHA и другие сервисы, передающие данные за рубеж.

Проверить сайт бесплатно

Частые вопросы

Законно ли использовать Google Fonts на сайте в России?

Подключение через CDN (fonts.googleapis.com) передаёт IP посетителя на серверы Google — это трансграничная передача персональных данных. Локальное подключение полностью легально: данные не покидают ваш сервер.

Как узнать, подключены ли Google Fonts через CDN?

Откройте код страницы (Ctrl+U) и поищите fonts.googleapis.com или fonts.gstatic.com. Если нашли — шрифты загружаются с серверов Google.

Ухудшится ли скорость при локальном подключении?

Нет, наоборот — локальные шрифты загружаются быстрее. Браузеру не нужно устанавливать соединение с внешним сервером. В формате WOFF2 файлы весят 15–30 КБ.

Нужно ли платить за Google Fonts?

Нет. Все шрифты Google Fonts — бесплатные, лицензия SIL Open Font License. Можно свободно скачивать и размещать на своём сервере.

Какой формат шрифта лучше?

WOFF2 — лучший: максимальное сжатие, поддержка 97%+ браузеров. Для совместимости со старыми браузерами добавьте WOFF как fallback.

Полный чек-лист ФЗ-152 для сайта

Google Fonts — только одно из требований. Проверьте все 37 пунктов соответствия в нашем чек-листе.

Читать чек-лист