Jak next/font optymalizuje czcionki?

Question

Accepted Answer

`next/font` automatycznie optymalizuje czcionki sieciowe, aby poprawić wydajność i wyeliminować przesunięcie układu — poprzez samodzielne hostowanie czcionek w czasie kompilacji i obsługę szczegółów ładowania. ## Używanie czcionki 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} ); } ``` ## Co robi automatycznie - **Samodzielne hostowanie** — w czasie kompilacji Next pobiera czcionkę Google i serwuje ją z **Twojej** domeny. Brak żądania do serwerów Google w czasie wykonywania → szybciej i lepiej dla prywatności (brak śledzenia przez strony trzecie). - **Zerowe przesunięcie układu** — oblicza metryki czcionki rezerwowej, aby odpowiadały czcionce sieciowej, więc gdy rzeczywista czcionka się zmieni, tekst się nie przesunie (chroni CLS). - **Wstępne ładowanie i podzbiory** — wstępnie ładuje czcionkę i zawiera tylko określone podzbiory znaków, zmniejszając pobranie. - **Brak żądania blokującego renderowanie** — czcionki są częścią kompilacji, a nie blokującego zewnętrznego pobierania. ## Czcionki lokalne ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Dlaczego optymalizacja czcionek jest ważna Czcionki to klasyczny problem wydajności i CLS: pobieranie przez stronę trzecią, które blokuje renderowanie tekstu, a następnie powoduje przesunięcie układu po załadowaniu czcionki (FOUT/FOIT). Wykonanie tego dobrze ręcznie wymaga `@font-face`, `font-display`, wstępnego ładowania i dopasowania metryk rezerwowych. ## Dlaczego to ważne `next/font` automatyzuje całą listę kontrolną wydajności czcionek — samodzielne hostowanie (szybkość + prywatność), podzbiory i wstępne ładowanie (mniejsze, szybsze) oraz dopasowanie metryk rezerwowych (brak przesunięcia układu) — za jednym importem. Usuwają trudną, łatwą do poplątania optymalizację i jest to rekomendowany sposób używania zarówno czcionek Google, jak i lokalnych w Next.js.