Bagaimana next/font mengoptimalkan font?

Question

Accepted Answer

`next/font` secara otomatis mengoptimalkan web font untuk meningkatkan performa dan menghilangkan layout shift — dengan self-hosting font pada waktu build dan menangani detail loading untuk Anda. ## Menggunakan Google Font ```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} ); } ``` ## Apa yang dilakukan secara otomatis - **Self-hosting** — pada waktu build, Next mengunduh Google Font dan melayaninya dari domain **Anda**. Tidak ada permintaan ke server Google pada runtime → lebih cepat dan lebih baik untuk privasi (tidak ada pelacakan pihak ketiga). - **Nol layout shift** — menghitung metrik font fallback untuk cocok dengan web font, jadi ketika font asli ditukar, teks tidak melompat (melindungi CLS). - **Preloading dan subsetting** — memuat font terlebih dahulu dan hanya menyertakan subset karakter yang ditentukan, mengecilkan download. - **Tidak ada permintaan render-blocking** — font adalah bagian dari build Anda, bukan fetch eksternal yang memblokir. ## Font lokal ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Mengapa optimasi font penting Font adalah masalah performa dan CLS klasik: fetch pihak ketiga yang memblokir rendering teks, kemudian menyebabkan layout jump ketika font dimuat (FOUT/FOIT). Melakukannya dengan benar secara manual memerlukan `@font-face`, `font-display`, preloading, dan fallback-metric matching. ## Mengapa ini penting `next/font` mengotomatiskan seluruh checklist font-performance — self-hosting (kecepatan + privasi), subsetting dan preloading (lebih kecil, lebih cepat), dan fallback metric matching (tidak ada layout shift) — di balik satu import. Ini menghilangkan optimasi yang rumit dan mudah salah, dan merupakan cara yang disarankan untuk menggunakan Google dan font lokal di Next.js.