🎯 Вступление:
Я часто вижу, как красивые сайты “тормозят”, хотя вроде всё оптимизировано. А потом открываю код — и вижу: шрифты подключены, как попало.
Это как качать ноги, а потом бежать в кроссовках на три размера больше — техника есть, а скорость теряется. 🏃♂️
Давай разберёмся, как подключить шрифты правильно — чтобы и красиво, и быстро.
💡 Основная часть:
🔍 Почему шрифты влияют на скорость
Когда пользователь открывает сайт, браузер сначала загружает шрифты, а потом рисует текст. Если они лежат на стороннем сервере или не оптимизированы — страница “висит”.
Это как ожидание партнёра в спортзале: пока он не пришёл, тренировка не начнётся.
🔧 Как правильно подключать
1️⃣ Хости шрифты у себя
Не полагайся на Google Fonts по умолчанию.
Лучше скачать нужные файлы (.woff2) и подключить локально.
Пример:
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter-Regular.woff2') format('woff2');
font-display: swap;
}
font-display: swap — ключевая настройка: она показывает системный шрифт, пока твой грузится.
2️⃣ Используй только нужные начертания
Не подгружай весь “гардероб” шрифта, если используешь только regular и bold.
Это как брать в спортзал весь набор блинов, когда тебе нужен один вес.
3️⃣ Формат .woff2 — твой лучший друг
Он лёгкий и современный. .ttf и .otf оставь для архива.
4️⃣ Предзагрузи шрифт
Чтобы ускорить первую отрисовку, добавь в <head>:
<link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
⚙️ Мой лайфхак
Я храню все шрифты в /assets/fonts/, называю чётко и сразу добавляю preload для основных.
Плюс, тестирую загрузку через WebPageTest — показывает, где сайт “тормозит”.
🏁 Финал:
Правильно подключенные шрифты — как сильные стабилизаторы в приседе: вроде мелочь, а весь сайт держат.
Не халтурь с деталями — и скорость сайта будет на уровне атлета. 💪
Подпишись, если хочешь больше таких “технических тренировок” для своих проектов.
💪 Прокачиваем не только мышцы, но и цифровые проекты.