Web Fonts को Next.js वेबसाइट में कैसे जोड़ें

वेब फोंट आपकी वेबसाइट में कस्टम फोंट जोड़ने का एक शानदार तरीका है। ये फोंट उपयोगकर्ता के सिस्टम पर उपलब्ध नहीं हो सकते हैं, इसलिए आपको उन्हें अपने प्रोजेक्ट में होस्ट करने या सीडीएन के माध्यम से संदर्भित करने की आवश्यकता है।

इन दो विधियों का उपयोग करके Next.js वेबसाइट में वेब फोंट शामिल करने का तरीका जानें।

Next.js में स्व-होस्ट किए गए फ़ॉन्ट्स का उपयोग करना

Next.js में स्व-होस्ट किए गए फ़ॉन्ट जोड़ने के लिए, आपको यह करना होगा @ फॉन्ट-फेस CSS नियम का उपयोग करें. यह नियम आपको वेब पेज पर कस्टम फोंट जोड़ने की अनुमति देता है।

फॉन्ट-फेस का उपयोग करने से पहले, आपको वह फॉन्ट डाउनलोड करना होगा जिसका आप उपयोग करना चाहते हैं। वहां कई हैं इंटरनेट पर ऐसी साइटें जो मुफ्त फोंट प्रदान करती हैं, Google फोंट, फोंटस्पेस और डैफॉन्ट वेबसाइटों सहित।

एक बार जब आप वेब फोंट डाउनलोड कर लेते हैं, तो उन्हें कई ब्राउज़रों का समर्थन करने के लिए अलग-अलग फ़ॉन्ट प्रारूपों में परिवर्तित करें। आप उपयोग कर सकते हैं मुफ्त ऑनलाइन फ़ॉन्ट रूपांतरण उपकरण ऐसा करने के लिए। आधुनिक वेब ब्राउज़र .woff और .woff2 स्वरूपों का समर्थन करते हैं। यदि आपको लीगेसी ब्राउज़रों का समर्थन करने की आवश्यकता है, तो आपको .eot और .ttf प्रारूप भी प्रदान करने चाहिए।

नामक एक नया फ़ोल्डर बनाएँ फोंट्स अपनी साइट निर्देशिका में और अपनी परिवर्तित फ़ॉन्ट फ़ाइलों को वहाँ सहेजें।

अगला चरण फ़ॉन्ट चेहरों को शामिल करना है शैलियों/वैश्विक.सीएसएस फ़ाइल उन्हें पूरी वेबसाइट पर उपलब्ध कराने के लिए। यह उदाहरण मत्स्यांगना फ़ॉन्ट के लिए बोल्ड में फ़ॉन्ट चेहरे दिखाता है:

@फॉन्ट फ़ेस {
 फुहारा परिवार: 'मत्स्यांगना';
 स्रोत: यूआरएल ('जलपरी-Bold.eot');
 स्रोत: यूआरएल ('मरमेड-बोल्ड.ईओटी?#आइफिक्स') प्रारूप('एम्बेडेड-opentype'),
 यूआरएल('मरमेड-बोल्ड.woff2') प्रारूप('woff2'),
 यूआरएल('मरमेड-बोल्ड.वॉफ') प्रारूप('वाह'),
 यूआरएल('जलपरी-Bold.ttf') प्रारूप('ट्रू टाइप');
 फोंट की मोटाई: बोल्ड;
 फ़ॉन्ट-शैली: सामान्य;
 फ़ॉन्ट-प्रदर्शन: स्वैप;
}

एक बार जब आप फ़ॉन्ट फ़ाइलों को शामिल कर लेते हैं, तो आप उन फ़ॉन्ट्स को घटक-स्तरीय CSS फ़ाइल में उपयोग कर सकते हैं:

एच1 {
 फ़ॉन्ट-परिवार: जलपरी;
}

CDN के माध्यम से Next.js में वेब फ़ॉन्ट्स शामिल करना

कुछ वेबसाइटें सीडीएन के माध्यम से वेब फोंट प्रदान करती हैं जिन्हें आप अपने ऐप में आयात कर सकते हैं। यह दृष्टिकोण सेट अप करना आसान है क्योंकि आपको फ़ॉन्ट डाउनलोड करने या फ़ॉन्ट चेहरे बनाने की आवश्यकता नहीं है। इसके अतिरिक्त, यदि आप Google फोंट या टाइपकिट का उपयोग करते हैं, तो नेक्स्ट.जेएस स्वचालित रूप से अनुकूलन को संभालता है।

आप CSS फ़ाइल के अंदर लिंक टैग या @import नियम का उपयोग करके CDN से फ़ॉन्ट जोड़ सकते हैं।

लिंक टैग हमेशा HTML डॉक्यूमेंट के हेड टैग के अंदर जाता है। Next.js में हेड टैग जोड़ने के लिए, आपको एक कस्टम दस्तावेज़ बनाना होगा। यह दस्तावेज़ प्रत्येक पृष्ठ को रेंडर करने के लिए उपयोग किए जाने वाले हेड और बॉडी टैग को संशोधित करता है।

फ़ाइल बनाकर इस कस्टम दस्तावेज़ सुविधा का उपयोग करना प्रारंभ करें /pages/_document.js.

फिर, _document.js फ़ाइल के शीर्ष में फ़ॉन्ट का लिंक शामिल करें।

आयात दस्तावेज़, {एचटीएमएल, हेड, मेन, नेक्स्टस्क्रिप्ट} से "अगला/दस्तावेज़";
कक्षामेरे कागज़ातका विस्तारदस्तावेज़{
स्थिरasync गेटइनिशियलप्रॉप्स (सीटीएक्स) {
कॉन्स्ट इनिशियलप्रॉप्स = इंतजार Document.getInitialProps (सीटीएक्स);
वापस करना {...प्रारंभिक प्रॉप्स};
 }
 प्रदान करना() {
वापस करना (
<एचटीएमएल>
<सिर>
<जोड़ना
 href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&प्रदर्शन = अदला-बदली"
 रिले ="शैली पत्रक"
 />
</Head>
<शरीर>
<मुख्य />
<नेक्स्टस्क्रिप्ट />
</body>
</Html>
 );
 }
}
निर्यातगलती करना मेरे कागज़ात;

नेक्स्ट.जेएस प्रोजेक्ट में फॉन्ट शामिल करने के लिए @import नियम का उपयोग कैसे करें

एक अन्य विकल्प @import नियम का उपयोग उस सीएसएस फ़ाइल में करना है जिसे आप फ़ॉन्ट का उपयोग करना चाहते हैं।

उदाहरण के लिए, वेब फ़ॉन्ट को शैलियों/वैश्विक.सीएसएस फ़ाइल।

@आयात url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&प्रदर्शन = अदला-बदली');

अब आप फ़ॉन्ट परिवार को a में संदर्भित कर सकते हैं सीएसएस चयनकर्ता इस कदर:

एच1 {
 फुहारा परिवार:'लिबरे कैसलॉन डिस्प्ले', सेरिफ़;
}

@Import नियम आपको निहित CSS फ़ाइल में फ़ॉन्ट आयात करने की अनुमति देता है। लिंक टैग का उपयोग करने से फ़ॉन्ट पूरी साइट पर पहुंच योग्य हो जाता है।

क्या आपको फ़ॉन्ट को स्थानीय रूप से होस्ट करना चाहिए या सीडीएन के माध्यम से उन्हें आयात करना चाहिए?

स्थानीय रूप से होस्ट किए गए फ़ॉन्ट्स आमतौर पर सीडीएन से आयात किए गए फ़ॉन्ट्स से तेज़ होते हैं। ऐसा इसलिए है क्योंकि वेब पेज लोड होने के बाद ब्राउजर को फॉन्ट सीडीएन के लिए अतिरिक्त अनुरोध नहीं करना पड़ता है।

यदि आप आयातित फोंट का उपयोग करना चाहते हैं, तो साइट के प्रदर्शन को बेहतर बनाने के लिए उन्हें पहले से लोड करें। यदि फ़ॉन्ट्स Google फोंट या टाइपकिट पर उपलब्ध हैं, तो आप उन्हें आयात कर सकते हैं और नेक्स्ट.जेएस की अनुकूलन सुविधाओं का लाभ उठा सकते हैं।