अपने वेब ऐप में फ़ॉन्ट्स को बंडल करें

स्व-होस्टिंग फोंट

यदि आप अपने वेब एप्लिकेशन में उपयोग किए गए फोंट को बंडल करना चाहते हैं, तो Fontsource एक पुस्तकालय है जिसे आप देखना चाहते हैं (पृष्ठ के अंत में परिशिष्ट में भी लिंक)। यह आपको उन फोंट को स्थापित करने की अनुमति देता है जिन्हें आप उपभोग करना चाहते हैं, जिसका अर्थ है कि आपके फोंट स्वयं द्वारा होस्ट किए जाते हैं और सीडीएन को लोड करने की आवश्यकता नहीं होती है।

प्रत्येक फ़ॉन्ट स्थापित करना

आप जिस फ़ॉन्ट का उपयोग करना चाहते हैं उसे स्थापित करने के लिए, बस प्रत्येक संस्करण के लिए इंस्टॉल-कमांड चलाएं। निम्नलिखित कोड स्निपेट दिखाता है कि इस PWA के लिए फ़ॉन्ट कैसे स्थापित किया जाएगा।

npm install @fontsource/work-sans

मेरे आवेदन के प्रवेश बिंदु में, मुझे इसे आयात करके स्थापित पैकेज का उपभोग करना होगा। यह मुझे किसी भी ओवरहेड को जोड़े बिना सटीक रूप से परिभाषित करने की अनुमति देता है कि मुझे क्या चाहिए। चूंकि फोंट आकार में काफी बड़े हो सकते हैं, बाइट्स को बचाने का यह एक अच्छा अवसर है।

import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";

अंत में, मुझे अपने सीएसएस में फ़ॉन्ट परिवार सेट करने की आवश्यकता है। आपके द्वारा उपयोग की जा रही लाइब्रेरी के आधार पर (उदाहरण के लिए Tailwind.css), यह कोड आपके लिए थोड़ा अलग दिख सकता है।

body {
  font-family: "Work Sans", sans-serif;
}

परिवर्तनीय फोंट

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