Как next/font оптимизирует шрифты?

Question

Accepted Answer

`next/font` автоматически оптимизирует веб-шрифты для повышения производительности и исключения смещения макета — путём локального размещения шрифтов на этапе сборки и обработки деталей загрузки за вас. ## Использование шрифта Google ```tsx // app/layout.tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], // only load the character sets you need (smaller files) display: "swap", // show fallback text immediately, swap when font loads }); export default function RootLayout({ children }) { return ( {/* apply the font */} {children} ); } ``` ## Что происходит автоматически - **Локальное размещение** — на этапе сборки Next загружает шрифт Google и обслуживает его с **вашего** домена. Никаких запросов к серверам Google во время выполнения → быстрее и лучше для приватности (без отслеживания третьими лицами). - **Нулевое смещение макета** — вычисляет метрики резервного шрифта так, чтобы они соответствовали веб-шрифту, поэтому когда реальный шрифт загружается, текст не прыгает (защищает CLS). - **Предварительная загрузка и подмножества** — предварительно загружает шрифт и включает только указанные подмножества символов, что уменьшает размер загрузки. - **Никаких блокирующих рендеринг запросов** — шрифты являются частью вашей сборки, а не внешней блокирующей загрузки. ## Локальные шрифты ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Почему оптимизация шрифтов важна Шрифты — классическая проблема производительности и CLS: загрузка с третьей стороны, которая блокирует рендеринг текста, а затем вызывает смещение макета при загрузке шрифта (FOUT/FOIT). Правильное выполнение вручную требует `@font-face`, `font-display`, предварительной загрузки и сопоставления метрик резервных шрифтов. ## Почему это важно `next/font` автоматизирует весь контрольный список производительности шрифтов — локальное размещение (скорость + приватность), подмножества и предварительная загрузка (меньше, быстрее) и сопоставление метрик резервных шрифтов (без смещения макета) — за одним импортом. Это устраняет сложную в реализации и легко поддающуюся ошибкам оптимизацию и является рекомендуемым способом использования шрифтов Google и локальных шрифтов в Next.js.