## Приклад поганої реалізації ```html ``` Проблеми: - багато зайвих weight-ів; - external dependency; - `display=block` може робити текст невидимим; - зайві network requests; - можливий layout shift. --- ## Приклад хорошої реалізації ```css @font-face { font-family: 'Inter'; src: url('/fonts/inter-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/inter-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } ``` У HTML: ```html ``` --- ## Next.js приклад У Next.js краще використовувати `next/font`, бо він автоматично оптимізує шрифти. ```tsx import type { ReactNode } from 'react'; import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'], display: 'swap', }); export default function Layout({ children }: { children: ReactNode }) { return ( {children} ); } ``` Для локального шрифту: ```tsx import type { ReactNode } from 'react'; import localFont from 'next/font/local'; const inter = localFont({ src: [ { path: '../fonts/inter-regular.woff2', weight: '400', style: 'normal', }, { path: '../fonts/inter-bold.woff2', weight: '700', style: 'normal', }, ], display: 'swap', }); export default function Layout({ children }: { children: ReactNode }) { return ( {children} ); } ``` --- ## Практичні правила Для production-проєкту: 1. Використовуй WOFF2. 2. Не підключай зайві font weights. 3. Додавай `font-display: swap`. 4. Preload тільки critical font. 5. Використовуй схожий fallback. 6. Не підключай 3–5 різних font families без потреби. 7. Для Next.js використовуй `next/font`. 8. Перевіряй CLS у Lighthouse або PageSpeed Insights. 9. Якщо дизайн дозволяє - використовуй system font stack. --- ## Короткий висновок Оптимізація шрифтів - це не тільки про красу тексту. Це напряму впливає на performance. Погано підключені fonts можуть: - затримувати рендер тексту; - псувати LCP; - викликати layout shift; - створювати зайві requests. Хороша стратегія: ```css font-display: swap; ``` плюс WOFF2, мінімум weight-ів, preload для critical font і нормальний fallback stack. І якщо ви працюєте з Next.js - `next/font` закриває більшість цих проблем автоматично.

Fonts optimization

Fonts optimization