Найти в Дзене
Hostinside.ru
39 подписчиков

Как подключить Google Fonts локально и ускорить сайт

1 мин
Многие владельцы сайтов до сих пор используют Google Fonts напрямую. На первый взгляд — удобно: вставил одну строчку кода, и нужный шрифт работает. Но у этого способа есть три больших минуса: 💡 Решение простое — подключить шрифты локально. А пошаговую инструкцию можно найти на сервисе HostInside. На странице «Шрифты Google Fonts локально» собрана пошаговая инструкция: Всё занимает 5–10 минут даже у новичка. @font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('/fonts/roboto-regular.woff2') format('woff2'),
url('/fonts/roboto-regular.woff') format('woff');
} После этого в CSS можно смело использовать: body {
font-family: 'Roboto', sans-serif;
} 👉 Если вы ещё не перевели сайт на локальные шрифты, советую заглянуть в статью на HostInside. Это реально повысит скорость и избавит от лишних рисков.
Оглавление

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

  • 🔒 Проблемы с законом 152-ФЗ: при загрузке шрифта данные пользователей уходят за границу.
  • 🐢 Медленная загрузка: сайт ждёт ответа от серверов Google, которые не всегда быстры в России.
  • ❌ Риск блокировок: если Google Fonts внезапно перестанет работать, сайт "сломается" визуально.

💡 Решение простое — подключить шрифты локально. А пошаговую инструкцию можно найти на сервисе HostInside.

Что делает сервис HostInside

На странице «Шрифты Google Fonts локально» собрана пошаговая инструкция:

  1. Перейти на сайт google-webfonts-helper.
  2. Выбрать нужный шрифт и начертания (обычный, жирный и т.п.).
  3. Скачать архив с шрифтами и готовым CSS-кодом.
  4. Загрузить файлы на сервер.
  5. Подключить шрифты через @font-face.
  6. Удалить старые ссылки на Google Fonts.

Всё занимает 5–10 минут даже у новичка.

Пример кода

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('/fonts/roboto-regular.woff2') format('woff2'),
url('/fonts/roboto-regular.woff') format('woff');
}

После этого в CSS можно смело использовать:

body {
font-family: 'Roboto', sans-serif;
}

Плюсы локального подключения

  • 🚀 Сайт грузится быстрее — меньше внешних запросов.
  • 📊 SEO выигрывает — поисковики любят быстрые сайты.
  • 🛡 Юридическая безопасность — соответствие российскому закону.
  • 🎨 Контроль над дизайном — можно оставить только нужные начертания и символы.

👉 Если вы ещё не перевели сайт на локальные шрифты, советую заглянуть в статью на HostInside. Это реально повысит скорость и избавит от лишних рисков.