next/font फ़ॉन्ट को कैसे अनुकूलित करता है?

Question

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