Bagaimana next/font mengoptimalkan font?

Question

Accepted Answer

`next/font` secara otomatis mengoptimalkan font web untuk meningkatkan performa dan menghilangkan layout shift — dengan self-hosting font pada waktu build dan menangani detail pemuat 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 saat runtime → lebih cepat dan lebih baik untuk privasi (tanpa pelacakan pihak ketiga). - **Nol layout shift** — menghitung metrik font fallback untuk mencocokkan web font, jadi ketika font asli ditukar, teks tidak melompat (melindungi CLS). - **Preloading & subsetting** — preload font dan hanya sertakan subset karakter yang ditentukan, mengecilkan unduhan. - **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 optimalisasi font penting Font adalah masalah performa dan CLS klasik: fetch pihak ketiga yang memblokir rendering teks, kemudian menyebabkan lompatan layout ketika font dimuat (FOUT/FOIT). Melakukan ini dengan baik secara manual memerlukan `@font-face`, `font-display`, preloading, dan pencocokan metrik fallback. ## Mengapa hal ini penting `next/font` mengotomatisasi seluruh checklist font-performance — self-hosting (kecepatan + privasi), subsetting dan preloading (lebih kecil, lebih cepat), dan pencocokan metrik fallback (tanpa layout shift) — di balik satu import. Ini menghilangkan optimalisasi yang rumit dan mudah salah, dan merupakan cara yang disarankan untuk menggunakan baik Google maupun font lokal di Next.js.