Kif next/font jottimizza fonts?

Question

Accepted Answer

`next/font` awtomatikament jottimizza fonts tal-web biex itejjeb il-prestazzjoni u telimina l-layout shift — billi t-self-host fonts fil-build time u tittratta d-dettalji tal-tagħbija għalik. ## Użu ta' 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} ); } ``` ## X'tagħmel awtomatikament - **Self-hosting** — fil-build time, Next tniżżel il-Google Font u tservi minn id-domenu **tiegħek**. L-ebda talba lill-servers ta' Google waqt runtime → aktar veloċi u aħjar għall-privatezza (l-ebda tracking ta' terzi). - **Zero layout shift** — tikkalkula l-metrika tal-font fallback biex tikkorrispondi mal-web font, għalhekk meta l-font veru jitbadal, it-test ma jaqfazx (tipprotegi l-CLS). - **Preloading & subsetting** — preload il-font u inkludi biss is-subset tal-karattri speċifikati, billi tikxxi l-download. - **L-ebda talba render-blocking** — fonts huma parti tal-build tiegħek, mhux external fetch li jistopp. ## Fonts lokali ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## Għaliex l-ottimizzazzjoni tal-fonts hija importanti Fonts huma problema klassika ta' prestazzjoni u CLS: external fetch li jistopp it-rendering tal-test, imbagħad jikkawża layout jump meta l-font jitħaċċan (FOUT/FOIT). Għall-għarrixa ta' dan tajjeb manwalment jeħtieġ `@font-face`, `font-display`, preloading, u matching tal-metrika tal-fallback. ## Għaliex dan importanti `next/font` awtomatizza l-checklist tal-font-performance kollu — self-hosting (veloċità + privatezza), subsetting u preloading (iżgħar, aktar veloċi), u matching tal-metrika tal-fallback (l-ebda layout shift) — wara import wieħed. Tneħħi l-ottimizzazzjoni ħoxxa u faċli biex taħbat, u hija l-mod irrakomandat biex tuża kemm Google kif ukoll fonts lokali f'Next.js.