अपनी Shopify थीम में कस्टम फ़ॉन्ट जोड़ें

Shopify आपके स्टोर के लिए उपयोग करने के लिए सैकड़ों निःशुल्क फ़ॉन्ट प्रदान करता है। हालाँकि, आपको अपने ब्रांड दिशानिर्देश के साथ संरेखित करने के लिए एक कस्टम फ़ॉन्ट का उपयोग करने की आवश्यकता है लेकिन यह Shopify द्वारा समर्थित नहीं है, फिर भी आप इसे अपनी थीम में जोड़ सकते हैं। इसे कैसे करें, इस पर एक गाइड यहाँ दी गई है:

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

2. इसके बाद, जोड़े जाने वाले प्रत्येक फ़ॉन्ट स्टाइल के लिए .woff और .woff2 फ़ॉर्मेट वाली दो फ़ाइलें तैयार करें। यह सुनिश्चित करने के लिए है कि आपका जोड़ा गया फ़ॉन्ट सभी प्रकार के ब्राउज़रों पर पढ़ने योग्य हो।

   

3. पर्याप्त फ़ाइलें होने के बाद, आप उन्हें थीम सेटिंग्स में फ़ाइल फ़ोल्डर में अपलोड करें।

   

   आपकी सभी अपलोड की गई फ़ॉन्ट फ़ाइलों में दाईं ओर चेन बटन होता है जो आपकी कॉपी करने की क्रिया के लिए फ़ाइल लिंक प्रदान करता है।

   

4. इसके बाद, अपने एडमिन डैशबोर्ड पर वापस जाएँ, ऑनलाइन स्टोर > थीम्स पर क्लिक करें और आगे संपादन करने के लिए Be Yours थीम चुनें। ... > कोड संपादित करें पर क्लिक करें।

   

5. खुले संपादन कोड विंडो में, आप बाएं हाथ के कॉलम में स्निपेट्स फ़ोल्डर पर जाएँ। इस फ़ोल्डर में, नए फ़ॉन्ट के लिए कुछ कस्टम कोड जोड़ने के लिए “css-variables.liquid” फ़ाइल पर क्लिक करें।

   

6. फ़ाइल ओपन फ़ाइल “css-variables.liquid” में, आप टैब स्टाइल के अंतर्गत अतिरिक्त कोड जोड़ते हैं। इसे {%- style -%} टेक्स्ट के अंतर्गत पाया जा सकता है। कोड इस प्रकार जोड़े जाते हैं:

   @फ़ॉन्ट-फ़ेस {
   फ़ॉन्ट-फ़ैमिली: " MyFontHeading ";
   src: url(' अपनी फ़ॉन्ट फ़ाइल लिंक जोड़ें ') format("woff2"),
   url(' अपना फ़ॉन्ट फ़ाइल लिंक जोड़ें ') format("woff"); }

   @फ़ॉन्ट-फ़ेस {
   फ़ॉन्ट-फ़ैमिली: " MyFontBody ";
   src: url(' अपनी फ़ॉन्ट फ़ाइल लिंक जोड़ें ') format("woff2"),
   url(' अपना फ़ॉन्ट फ़ाइल लिंक जोड़ें ') format("woff"); }

   नोट : इटैलिक टेक्स्ट सेक्शन आपके द्वारा कस्टमाइज़ किए जाते हैं। जोड़े जाने वाले @font-face{ } कोड की संख्या इस बात पर निर्भर करती है कि आपके पास कितने फ़ॉन्ट स्टाइल हैं।

   

7. उसके बाद, आप प्रासंगिक कोड लाइन पर नेविगेट करने के लिए “font-body-family” टेक्स्ट की खोज करते हैं और {{...}} के सभी हिस्सों को चरण 6 के कोड में फ़ॉन्ट-फ़ैमिली के लिए अपने जोड़े गए टेक्स्ट से बदल देते हैं (हमारे उदाहरण में, यह 'MyFontBody' है)। इसी तरह, “font-heading-family” टेक्स्ट की खोज करें और {{...}} के सभी हिस्सों को फ़ॉन्ट-फ़ैमिली लाइन के लिए अपने जोड़े गए टेक्स्ट से बदल दें (हमारे उदाहरण में 'MyFontHeading')।
8. प्रतिस्थापन के बाद, लाल बॉक्स में टिप्पणी किए गए कोड को हरे बॉक्स में कोड द्वारा प्रतिस्थापित किया जाता है। यह नीचे दी गई तस्वीर की तरह दिखता है:

   

9. अंत में, सहेजें पर क्लिक करें.

टिप्पणी :

• एक बार जब आप इन कोडों को “css-variables.liquid” फ़ाइल में जोड़ देते हैं, तो थीम सेटिंग्स > टाइपोग्राफी में सेटिंग्स अब प्रभावी नहीं रहतीं, चाहे आप यहां कुछ भी कॉन्फ़िगर करें।
• उपरोक्त सभी निर्देश तब लागू होते हैं जब आप सभी अनुभागों और ब्लॉक के लिए एक ही कस्टम फ़ॉन्ट लागू करते हैं। यदि आपको अलग-अलग अनुभागों या ब्लॉकों के लिए अलग-अलग फ़ॉन्ट लागू करने की आवश्यकता है, तो संपादन प्रक्रिया बहुत अधिक जटिल होगी और कृपया आगे की सहायता प्राप्त करने के लिए हमारी सहायता टीम से संपर्क करें।

आगे सहायता की आवश्यकता है

यदि आपको अपनी Be Yours थीम के संबंध में कोई समस्या आती है या अतिरिक्त सहायता की आवश्यकता होती है, तो विशेषज्ञ मार्गदर्शन के लिए Roartheme की सहायता टीम से संपर्क करने में संकोच न करें।

RoarTheme के व्हाट्सएप के माध्यम से 8 घंटे के भीतर सहायता प्राप्त करने के लिए QR कोड को स्कैन करें