pathrų MPEG " svarbu - vadinasi," . Nėra Google serverių prašymų vykdymo metu → greičiau ir geriau privatumui (nėra trečiosios šalies sekimo).
- **Nulis išdėstymo poslinkio** — apskaičiuoja atsarginės šrifto metrikus, atitinkančius interneto šriftą, todėl tikram šriftui sukeitus tekstą nepajuda (apsaugo CLS).
- **Iš anksto įkeliami ir pogrupio šriftai** — iš anksto įkelia šriftą ir įtraukia tik nurodytus simbolių pogrupius, sumažindama atsisiuntimą.
- **Nėra blokuojančio render prašymo** — šriftai yra jūsų sukūrimo dalis, o ne blokuojamas išorinis gavinys.

## Lokalūs šriftai

[[CODE_2]]

## Kodėl svarbi šriftų optimizacija

Šriftai yra klasiški veikimo ir CLS uždavinys: trečiosios šalies gavinys, kuris blokuoja teksto atvaizdavimą, o tada sukelia išdėstymo poslinkį šriftui įsikėlus (FOUT/FOIT). Tai atlikti gerai rankiniu būdu reikia `@font-face`, `font-display`, iš anksto įkėlimo ir atsarginės metrikos atitikimo.

## Kodėl tai svarbu

`next/font` automatizuoja visą šriftų veikimo patikrinimo sąrašą — savivaldus hostingas (greitis + privatumas), pogrupio į priekį ir iš anksto įkėlimas (mažiau, greičiau) ir atsarginės metrikos atitikimas (nėra išdėstymo poslinkio) — už vienos importacijos ribų.

Jis pašalina nepatogią, lengvai klaidintiną optimizaciją ir yra rekomenduojamas būdas naudoti Google ir vietos šriftus Next.js programoje.

Question

pathrų MPEG " svarbu - vadinasi," . Nėra Google serverių prašymų vykdymo metu → greičiau ir geriau privatumui (nėra trečiosios šalies sekimo).
- **Nulis išdėstymo poslinkio** — apskaičiuoja atsarginės šrifto metrikus, atitinkančius interneto šriftą, todėl tikram šriftui sukeitus tekstą nepajuda (apsaugo CLS).
- **Iš anksto įkeliami ir pogrupio šriftai** — iš anksto įkelia šriftą ir įtraukia tik nurodytus simbolių pogrupius, sumažindama atsisiuntimą.
- **Nėra blokuojančio render prašymo** — šriftai yra jūsų sukūrimo dalis, o ne blokuojamas išorinis gavinys.

## Lokalūs šriftai

[[CODE_2]]

## Kodėl svarbi šriftų optimizacija

Šriftai yra klasiški veikimo ir CLS uždavinys: trečiosios šalies gavinys, kuris blokuoja teksto atvaizdavimą, o tada sukelia išdėstymo poslinkį šriftui įsikėlus (FOUT/FOIT). Tai atlikti gerai rankiniu būdu reikia `@font-face`, `font-display`, iš anksto įkėlimo ir atsarginės metrikos atitikimo.

## Kodėl tai svarbu

`next/font` automatizuoja visą šriftų veikimo patikrinimo sąrašą — savivaldus hostingas (greitis + privatumas), pogrupio į priekį ir iš anksto įkėlimas (mažiau, greičiau) ir atsarginės metrikos atitikimas (nėra išdėstymo poslinkio) — už vienos importacijos ribų.

Jis pašalina nepatogią, lengvai klaidintiną optimizaciją ir yra rekomenduojamas būdas naudoti Google ir vietos šriftus Next.js programoje.

Accepted Answer

`next/font` वेब फॉन्ट्स को स्वचालित रूप से अनुकूलित करता है प्रदर्शन में सुधार करने और लेआउट शिफ्ट को खत्म करने के लिए — निर्माण समय पर फॉन्ट्स को स्व-होस्ट करता है और आपके लिए लोडिंग विवरण संभालता है। ## 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} ); } ``` ## यह स्वचालित रूप से क्या करता है - **Self-hosting** — निर्माण समय पर, Next Google फॉन्ट को डाउनलोड करता है और आपके डोमेन से परोसता है। रनटाइम पर Google के सर्वर के लिए कोई अनुरोध नहीं → तेजी से और गोपनीयता के लिए बेहतर (कोई तीसरे पक्ष का ट्रैकिंग नहीं)। - **शून्य लेआउट शिफ्ट** — यह फॉलबैक फॉन्ट के मेट्रिक्स की गणना करता है ताकि वेब फॉन्ट से मेल खाए, इसलिए जब वास्तविक फॉन्ट स्वैप हो जाए, तो पाठ कूदता नहीं है (CLS की सुरक्षा करता है)। - **Preloading और subsetting** — फॉन्ट को पूर्वलोड करता है और केवल निर्दिष्ट वर्णों का सबसेट शामिल करता है, डाउनलोड को सिकोड़ता है। - **कोई render-blocking अनुरोध नहीं** — फॉन्ट्स आपकी निर्माण का हिस्सा हैं, कोई बाहरी fetch नहीं। ## स्थानीय फॉन्ट्स ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## फॉन्ट अनुकूलन क्यों महत्वपूर्ण है फॉन्ट्स एक क्लासिक प्रदर्शन और CLS समस्या हैं: एक तीसरे पक्ष का fetch जो पाठ रेंडरिंग को ब्लॉक करता है, फिर जब फॉन्ट लोड होता है तो लेआउट शिफ्ट का कारण बनता है (FOUT/FOIT)। इसे मैन्युअल रूप से सही तरीके से करने के लिए `@font-face`, `font-display`, preloading, और fallback-metric matching की आवश्यकता होती है। ## यह क्यों महत्वपूर्ण है `next/font` पूरी फॉन्ट-प्रदर्शन चेकलिस्ट को स्वचालित करता है — self-hosting (गति + गोपनीयता), subsetting और preloading (छोटे, तेजी से), और fallback metric matching (कोई लेआउट शिफ्ट नहीं) — एक import के पीछे। यह एक मुश्किल, गलत होने में आसान अनुकूलन को हटाता है और Next.js में Google और स्थानीय फॉन्ट्स दोनों का उपयोग करने का अनुशंसित तरीका है।