Как подключить шрифты локально и забыть про Google Fonts

🤔 Зачем вообще отключать Google Fonts?

Казалось бы, подключил строчку кода и красивые шрифты уже на сайте. Удобно! Но есть несколько весомых «но»:

• 📜 Закон 152-ФЗ: При загрузке шрифтов с серверов Google, IP-адреса ваших российских пользователей передаются за границу. Это прямое нарушение закона о локализации персональных данных, что может привести к штрафам и блокировке сайта.
• 🚀 Скорость загрузки: Каждый запрос к внешнему серверу — это задержка. Серверы Google могут быть далеко, а в РФ их работа может быть нестабильной. Локальные шрифты загружаются мгновенно вместе с сайтом, что напрямую влияет на поведенческие факторы и позиции в поиске.
• 🎨 Независимость и стабильность: Что если Google заблокирует свои сервисы в РФ или у них случится сбой? Ваш сайт останется без шрифтов и будет выглядеть «сломанным». Храня шрифты у себя, вы полностью контролируете ситуацию.

Готовы сделать сайт лучше? Поехали! 👇

Шаг 1: Находим и скачиваем нужный шрифт

Наша цель — получить файлы шрифтов в формате .ttf или .otf.

1. Откройте Google Fonts и выберите понравившийся шрифт (например, Roboto).
2. На странице шрифта вы увидите кнопку "Download family". Нажмите на нее.
3. Вы скачаете ZIP-архив. Распакуйте его. Внутри вы найдете файлы с расширением .ttf — это то, что нам нужно.

Пример страницы шрифта Roboto на Google Fonts с кнопкой скачивания.

Шаг 2: Конвертируем в веб-формат WOFF2 (Это важно!)

Формат .ttf — хороший, но для веба есть кое-что получше. WOFF2 (Web Open Font Format 2) — это современный стандарт, который отлично сжимает шрифты, уменьшая их вес на 30-50% без потери качества. Меньше вес — быстрее загрузка!

1. Зайдите на любой онлайн-конвертер. Например, CloudConvert или FontSquirrel Webfont Generator.
2. Загрузите ваши .ttf файлы.
3. Выберите в качестве конечного формата WOFF2.
4. Скачайте сконвертированные .woff2 файлы.

Теперь у вас есть самые оптимизированные файлы шрифтов. Поздравляем, вы уже обошли многих! 🥳

Шаг 3: Загружаем шрифты на свой сайт

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

1. Подключитесь к вашему сайту по FTP или через файловый менеджер в панели управления хостингом.
2. В корневой папке сайта создайте новую папку, например, /fonts/ (или /assets/fonts/).
3. Загрузите в эту папку все ваши .woff2 файлы.

Примерная структура папок будет выглядеть так:

your-site.ru/
├── index.html
├── style.css
└── fonts/
    ├── Roboto-Regular.woff2
    └── Roboto-Bold.woff2
                    

Шаг 4: Подключаем шрифты в CSS с помощью @font-face

Самая ответственная часть. Откройте ваш главный CSS-файл (часто это style.css или main.css) и добавьте в самое его начало следующий код. Этот код "объявляет" ваши локальные шрифты и делает их доступными для использования на сайте.

Для каждого начертания (обычный, жирный, курсив и т.д.) нужна своя декларация @font-face.

/* Объявляем обычное начертание шрифта Roboto */
@font-face {
  font-family: 'Roboto'; /* Придумываем имя для нашего шрифта */
  src: url('/fonts/Roboto-Regular.woff2') format('woff2'); /* Путь к файлу на вашем сайте */
  font-weight: 400; /* Указываем жирность: 400 - это normal */
  font-style: normal; /* Указываем стиль: normal - обычный */
  font-display: swap; /* Очень важный параметр! Ускоряет отображение текста */
}

/* Объявляем жирное начертание шрифта Roboto */
@font-face {
  font-family: 'Roboto'; /* Имя то же самое! */
  src: url('/fonts/Roboto-Bold.woff2') format('woff2'); /* Путь к жирному файлу */
  font-weight: 700; /* Указываем жирность: 700 - это bold */
  font-style: normal;
  font-display: swap;
}
                        

Разберем по частям:

• font-family: Название, по которому вы будете обращаться к шрифту в CSS. Лучше использовать настоящее имя шрифта.
• src: Самое главное — путь к файлу шрифта на вашем сервере. Путь должен быть от корня сайта (начинаться с /).
• font-weight: Числовое значение жирности. 400 = normal, 700 = bold.
• font-style: normal или italic.
• font-display: swap;: Магическое свойство! Оно говорит браузеру сначала показать текст системным шрифтом, и как только ваш красивый шрифт загрузится — плавно его подменить. Это сильно улучшает восприятие скорости загрузки. Всегда используйте его!

✨ Интерактивный генератор @font-face

Не хотите писать код вручную? Воспользуйтесь нашим генератором! Просто заполните поля, и он создаст готовый CSS-код для вставки на ваш сайт.

Шаг 5: Применяем новый шрифт к элементам сайта

Теперь, когда шрифты объявлены, можно их использовать. В том же CSS-файле найдите стили для ваших текстов и укажите им новое font-family.

body {
  font-family: 'Roboto', sans-serif; /* Используем наше имя. 'sans-serif' - запасной вариант */
  font-weight: 400; /* По умолчанию текст будет обычным */
}

h1, h2, h3, strong, b {
  font-family: 'Roboto', sans-serif;
  font-weight: 700; /* Заголовки и выделения будут жирными */
}
                    

Браузер автоматически подберет нужный файл шрифта (Roboto-Regular.woff2 или Roboto-Bold.woff2) в зависимости от указанного font-weight. Удобно, правда?

Шаг 6: Удаляем старое подключение Google Fonts (Обязательно!)

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

Откройте HTML-код ваших страниц (чаще всего это файл header.php, index.html или аналогичный) и найдите внутри тега <head> строку, похожую на эту:

<!-- Вот это нужно найти и безжалостно удалить! -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
                    

Также проверьте CSS-файлы на наличие импорта через @import:

/* И такую строку тоже нужно удалить из CSS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
                    

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

Бонус: Как локализовать иконочные шрифты (Font Awesome)

Принцип локализации иконок Font Awesome (как бесплатных, так и Pro-версии) очень похож на работу со шрифтами. Вы также скачиваете файлы, загружаете их на свой сервер и меняете одну строчку в коде.

Шаг 1: Скачиваем архив Font Awesome

В зависимости от вашей версии, действия немного отличаются:

• Для Font Awesome Free: Перейдите на официальную страницу загрузки и скачайте архив "Free for Web".
• Для Font Awesome Pro: Войдите в свой аккаунт на fontawesome.com, перейдите в раздел загрузок и скачайте архив для веба.

Распакуйте скачанный ZIP-архив. Нас интересуют две вещи: папка webfonts и файл css/all.min.css.

Шаг 2: Загружаем файлы на хостинг

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

1. В корне вашего сайта создайте папку, например, /fontawesome/.
2. Внутрь этой папки загрузите всю папку webfonts из архива.
3. Также в папку /fontawesome/ загрузите папку css (или хотя бы один файл all.min.css из нее).

В итоге у вас должна получиться такая структура:

your-site.ru/
└── fontawesome/
    ├── css/
    │   └── all.min.css
    └── webfonts/
        ├── fa-brands-400.woff2
        ├── fa-regular-400.woff2
        └── fa-solid-900.woff2
        └── ... (другие файлы шрифтов)
                    

Шаг 3: Меняем ссылку в коде сайта

Теперь осталось самое простое. Откройте HTML-код вашего сайта (файл header.php, index.html и т.д.) и найдите в теге <head> старую ссылку на CDN Font Awesome.

<!-- Пример ссылки на CDN, которую нужно удалить -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<!-- Новая ссылка на локальный файл -->
<link rel="stylesheet" href="/fontawesome/css/all.min.css">

Готово! Теперь иконки Font Awesome загружаются с вашего сервера, не создавая лишних запросов к иностранным CDN и не передавая данные пользователей. ✅