#шрифты #иконки #оптимизация #перформанс #CSS

Локальный хостинг шрифтов и иконок — простая инструкция

Перенести шрифты и иконки с Google Fonts и FontAwesome к себе на сервер — 1-2 часа работы. Зависит сайт от зарубежных CDN не будет, плюс +200-500 мс к скорости загрузки. Пошаговая инструкция.

8 июня 2026

Самые частые внешние зависимости на сайте — Google Fonts и FontAwesome. Обе переезжают к себе за час-два и улучшают всё: скорость, доступность, контроль версий.

Шрифты — пошагово

Шаг 1: выбрать только нужные начертания

На сайте обычно используется 2-4 начертания: Regular, Medium, Semibold, Bold. Не подключайте все 18, как делает Google Fonts по умолчанию.

Шаг 2: скачать WOFF2

WOFF2 — единственный формат, который имеет смысл в 2026. Все актуальные браузеры поддерживают.

Скачайте через инструмент или прямо с GitHub-репозитория шрифта (например, github.com/rsms/inter для Inter).

Шаг 3: положить в проект

/static/fonts/
  inter-regular.woff2
  inter-medium.woff2
  inter-semibold.woff2
  inter-bold.woff2

Шаг 4: подключить через @font-face

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

font-display: swap — обязательно. Без него браузер ждёт шрифт до 3 секунд, рисует пустой текст.

Шаг 5: preload для критического шрифта

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

Только для шрифта, который виден на первом экране. Остальные пусть грузятся лениво.

Шаг 6: правильный cache-control

Шрифты не меняются — кэшируйте на год:

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

Иконки — два пути

Путь 1: inline SVG

Для 5-15 иконок проще inline:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="2" stroke-linecap="round"
     stroke-linejoin="round">
  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
</svg>

Плюсы: цвет наследуется от текста, размер задаётся CSS, нет внешнего запроса.

Минусы: HTML раздувается на больших страницах.

Путь 2: SVG-спрайт

Для 20+ иконок — собрать в один файл:

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="check" viewBox="0 0 24 24">
    <path d="M20 6 9 17l-5-5"/>
  </symbol>
  <symbol id="close" viewBox="0 0 24 24">
    <path d="M18 6 6 18M6 6l12 12"/>
  </symbol>
</svg>

<svg width="24" height="24"><use href="#check"/></svg>

Один файл кэшируется, использование — одна строка <use>.

Откуда брать SVG-иконки

Tabler Icons — 4500+ иконок, MIT, открытый исходник.
Lucide — продолжение Feather Icons.
Phosphor Icons — 6000+ иконок в 6 вариантах.
Heroicons — от Tailwind, минималистичный набор.

Все эти наборы можно установить через npm или скачать с GitHub. У всех — open source лицензия.

Что НЕ делать

Не используйте PNG для иконок — масштабирование плохое, размер большой.
Не подключайте Google Fonts с фолбэком на локальный — у CDN есть кэш браузера у некоторых юзеров. Лучше сразу локально.
Не грузите 18 начертаний «на будущее» — каждое отдельный запрос.
Не забывайте про font-display: swap.

Вывод

Локальный хостинг шрифтов и иконок — 1-2 часа работы, после которой сайт не зависит от Google/jsDelivr/FontAwesome, грузится быстрее на 200-500 мс и совместим с whitelist. Ключевое: только нужные начертания WOFF2, font-display: swap, preload для критического шрифта, SVG-спрайт для иконок.

Узнайте подробнее о наших компетенциях

Разработка, ИИ, автоматизация — что мы делаем и как.