Je, next/font inaongeza fonti vipi?

Question

Accepted Answer

`next/font` inaongeza fonts za wavuti kiotomatiki ili kuboresha utendaji na kuondoa kiteleza cha muundo — kwa kujibu-hifadhi fonts wakati wa ujenzi na kuanzisha maelezo ya upakaji kwa ajili yako. ## Kutumia Font ya 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} ); } ``` ## Nini inayofanya kiotomatiki - **Kujibu-hifadhi** — wakati wa ujenzi, Next kupakua font ya Google na kuitumaini kutoka **yako** uwanja. Hakuna ombi kwa seva za Google wakati wa utekelezaji → haraka na nzuri zaidi kwa faragha (hakuna ufuataji wa pande tatu). - **Kiteleza cha muundo cha sifuri** — inakokotoa metrics ya font ya mkakati kulingana na font ya wavuti, kwa hivyo font halisi itapobadili, maandishi hayahamia (inasikiliza CLS). - **Kupakia mwenyewe na kuweka sehemu** — kupakia mwenyewe font na kujumuisha tu sehemu maalum za herufi, kucheza kupakua. - **Hakuna ombi lenye kuzuia upakaji** — fonts ni sehemu ya ujenzi wako, si kupakua kwa nje lenye kuzuia. ## Fonts za ndani ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Kwa nini uongezaji wa fonts ni muhimu Fonts ni tatizo la kawaida la utendaji na CLS: kupakua kwa pande tatu kinachozuia upakaji wa maandishi, kisha kusababisha kiteleza cha muundo wakati font inapakwa (FOUT/FOIT). Kufanya hii vyema kwa mikono inasema `@font-face`, `font-display`, kupakia mwenyewe, na kulingana kwa metrics ya mkakati. ## Kwa nini ni muhimu `next/font` inaongeza orodha nzima ya tikiti ya utendaji wa fonts — kujibu-hifadhi (kasi + faragha), kuweka sehemu na kupakia mwenyewe (ndogo, haraka) na kulingana kwa metrics ya mkakati (hakuna kiteleza cha muundo) — nyuma ya uagizi mmoja. Inaondoa uongezaji usiotakikani, unaoweza kuwa na hitilafu na ni njia iliyopendekezwa ya kutumia fonts ya Google na fonts za ndani katika Next.js.