Как оптимизировать кастомные шрифты?

Как оптимизировать кастомные шрифты?

Оптимизация кастомных шрифтов критична для производительности и пользовательского опыта. Неоптимизированные веб-шрифты могут увеличить время загрузки страницы и вызвать проблему FOIT (Flash of Invisible Text) или FOUT (Flash of Unstyled Text).

1. Выбор правильного формата шрифта

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

@font-face {
  font-family: "Custom Font";
  src: url("/fonts/custom.woff2") format("woff2"),
       url("/fonts/custom.woff") format("woff");
  font-display: swap;
}

Забудьте о TTF и OTF для веба — они значительно больше по размеру.

2. Subsetting и переменные шрифты

У вас часто есть только часть символов из полного набора. Используйте инструменты вроде fonttools для создания подмножеств:

pyftsubset font.ttf --unicodes=U+0000-U+007F

Переменные шрифты (Variable Fonts) позволяют одним файлом охватить разные вариации (weight, width, italic). Это может сократить размер в 2-3 раза:

@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

body { font-weight: 400; }
strong { font-weight: 600; }

3. Стратегия font-display

Парameter font-display критичен для UX:

@font-face {
  font-family: "Main Font";
  src: url("/fonts/main.woff2") format("woff2");
  /* Параметры: auto | block | swap | fallback | optional */
  font-display: swap; /* Используем fallback, затем swap на custom */
}

• swap: максимальный UX, сразу показываем текст fallback-шрифтом, потом заменяем на custom
• block: блокируем отображение до 3 сек, потом fallback
• fallback: 100ms ждем, потом fallback, потом swap если загружена
• optional: используем только если загружена быстро (обычно для icons)

4. Lazy Loading и Self-Hosting

Лучше всего хостить шрифты на своем сервере (CDN). Проч шрифты в фоне:

<!-- Критичный шрифт в head -->
<link rel="preload" as="font" type="font/woff2" href="/fonts/main.woff2" crossorigin>

<!-- Остальные шрифты можно загружать асинхронно -->
<link rel="preload" as="font" type="font/woff2" href="/fonts/secondary.woff2" crossorigin>

5. Font Loading API

Для большего контроля используйте Font Loading API:

const fontFace = new FontFace(
  "Custom Font",
  "url(/fonts/custom.woff2)",
  { weight: "400", display: "swap" }
);

fontFace.load().then(() => {
  document.fonts.add(fontFace);
  document.body.style.fontFamily = "Custom Font, sans-serif";
}).catch(err => {
  console.error("Font failed to load", err);
  // fallback логика
});

6. Минимизация количества вариаций

Загружайте только необходимые веса и стили:

/* ❌ Загружаем все: 100, 300, 400, 600, 700, 800 — 500+ KB */

/* ✅ Загружаем минимум: 400, 600 — 50 KB */
@font-face {
  font-family: "Optimized Font";
  src: url("/fonts/regular.woff2") format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: "Optimized Font";
  src: url("/fonts/semibold.woff2") format("woff2");
  font-weight: 600;
}

7. FOUT/FOIT минимизация в React/Next.js

В Next.js используйте next/font/google с автоматической оптимизацией:

import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["cyrillic", "latin"],
  weight: ["400", "600"],
  display: "swap",
  preload: true,
});

Next.js автоматически добавит правильные font-display и preload теги.

8. Измерение производительности

Проверяйте метрики через DevTools:

// Performance Observer для отслеживания Font Loading
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.name.includes("font")) {
      console.log("Font loaded:", entry.name, "Duration:", entry.duration);
    }
  });
});

observer.observe({ entryTypes: ["resource"] });

Основной KPI — время, прежде чем текст становится видимым и интерактивным (First Contentful Paint, Largest Contentful Paint).

Итоговые рекомендации

1. Используйте WOFF2 с fallback на WOFF
2. Применяйте subsetting для кириллицы/латиницы
3. Выбирайте font-display: swap для максимального UX
4. Хостьте на CDN с preload для критичных шрифтов
5. Минимизируйте количество вариаций (2-3 веса максимум)
6. Используйте Variable Fonts если требуется множество вариаций
7. Тестируйте на медленных соединениях (throttling в DevTools)
8. Мониторьте CLS (Cumulative Layout Shift) при смене шрифтов