Kepiye next/font ngoptimalake font?

Question

Accepted Answer

`next/font` kanthi otomatis ngoptimalake font web kanggo nambah performa lan ngilangke layout shift — ngo-host font iyat dhewe ing wektu build lan nangani detalhe loading kanggo sampeyan. ## Nggunakake 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 sing ditindakake kanthi otomatis - **Self-hosting** — ing wektu build, Next ngundhuh Google Font lan nglayani saka domain **sampeyan**. Ora ana panjalok menyang server Google ing runtime → luwih cepet lan luwih apik kanggo privacy (ora ana tracking pihak katelu). - **Ora ana layout shift** — ngetung metrik font fallback kanggo cocog karo font web, mula nalika font sejati ditukar, teks ora mlumpat (nglindhungi CLS). - **Preloading & subsetting** — preload font lan mung kasandunga subset karakter sing ditetapake, nyamarake download. - **Ora ana panjalok render-blocking** — font minangka bagian saka build sampeyan, dudu fetch eksternal sing ngalangi. ## Font lokal ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Mengapa optimalisasi font penting Font minangka masalah performa lan CLS klasik: fetch pihak katelu sing ngalangi rendering teks, banjur nyebabake lompatan layout nalika font dimuat (FOUT/FOIT). Nindakake iki kanthi apik sacara manual butuh `@font-face`, `font-display`, preloading, lan fallback-metric matching. ## Mengapa iku penting `next/font` ngotomatisake checklist font-performance kabeh — self-hosting (kecepatan + privacy), subsetting lan preloading (luwih cilik, luwih cepet), lan fallback metric matching (ora ana layout shift) — ing mburi siji import. Iku ngilangke optimalisasi sing rumit lan gampang salah, lan minangka cara sing direkomendasikake kanggo nggunakake Google lan font lokal ing Next.js.