Yadda next/font ke sa fi da inganta?

Question

Accepted Answer

`next/font` tana ba da inganta wa fonanni na gida a sauki — tana ba da ina amsawa kasua can safa gida da kula da akasin loda maka. ## Amfani da 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} ); } ``` ## Abin da yake bugi ji a gida - **Ikon gida** — a lokacin gina, Next yana saukowa Google Font kuma yana bayanin shi daga **naka** yanki. Babu bukatar Google fasali a lokacin gudu → masu sauri da mafi kyau don sirri (babu idan amfani mai saidawa). - **Sifili sauri ne saurin saurin** — yana kirkirani kadarorin fonin murgundu don daidai da fonin gida, saboda haka lokacin da ainihin fonin ya juyawa, rubutu ba ya sauka (kare CLS). - **Wageza & saurin asajiya** — wageza fonin kuma ya haura kawai waucin kasuwa da aka tsinka, rage saukin saukin. - **Babu bukatar damre-ike** — fonanni ne sayan gina naka, ba ike damre kasua. ## Fonanni masu gida ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Me yasa sa inganta mata Fonanni shine masalacin sauki da CLS: sauki mai daidai waje wace ba ya damra fuskar rubutu, jiya yana sa sauki sauki lokacin da saka ya gaskarwa (FOUT/FOIT). Yin wannan daidai a hannu, kuna bukar `@font-face`, `font-display`, wageza, da daidaitawa sauri-sauri. ## Me yasa yake mahimmi `next/font` tana barkawa aikin daidaita fonin gida — ikon gida (laka + sirri), saurin sauri da wageza (kanana, sauri), da daidaitawa sauri-sauri (babu sauki sauki) — a bayan shiga koli. Yana yar da aiki mai wahala, saurin iya bugi ga sahihanci da yana ba da shawarar halaye Google da fonanni masu gida a Next.js.