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

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

फ़ॉन्ट कस्टम से पहले
फ़ॉन्ट कस्टम के बाद

आप नीचे दिए गए दो तरीकों में से किसी एक का उपयोग करके अपने कॉन्सेप्ट थीम में फ़ॉन्ट को अनुकूलित कर सकते हैं:

  • लिक्विड कोड संपादित करें (अत्यधिक अनुशंसित)

    इसे प्राप्त करने के लिए यहां 9-चरणीय मार्गदर्शिका दी गई है:

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

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

    3. पर्याप्त फ़ाइलें होने के बाद, आप उन्हें [एडमिन डैशबोर्ड] > [सामग्री] 1 > [फ़ाइलें] 2 > [अपलोड] 3 के माध्यम से अपलोड करें।

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

    4. इसके बाद, अपने एडमिन डैशबोर्ड पर वापस जाएं, [ऑनलाइन स्टोर] 1 > [थीम्स] 2 > कॉन्सेप्ट थीम चुनें > [एक्शन] 3 > [कोड संपादित करें] 4 पर क्लिक करें।

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

    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-heading-family” टेक्स्ट खोजें और {{...}} के सभी भागों को font-family लाइन के लिए अपने जोड़े गए टेक्स्ट से बदलें (हमारे उदाहरण में 'MyFontBody')।

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

    8. प्रतिस्थापित करने के बाद, यह नीचे दी गई तस्वीर की तरह दिखता है:

    9. टिप्पणी:

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

    जबकि Shopify मुफ़्त फ़ॉन्ट का एक विशाल संग्रह प्रदान करता है, आपको अपने ब्रांड दिशानिर्देशों के साथ संरेखित करने के लिए एक कस्टम फ़ॉन्ट की आवश्यकता हो सकती है। यदि आपका वांछित फ़ॉन्ट Shopify द्वारा मूल रूप से समर्थित नहीं है, तो चिंता न करें! हमारी टीम ने एक ऐप विकसित किया है जो आपके वेब डिज़ाइन को बढ़ाने के लिए फ़ॉन्ट अनुकूलन विकल्पों की एक विस्तृत श्रृंखला प्रदान करता है । संभावनाओं की खोज करें और हमारे ऐप के साथ अपने स्टोर के सौंदर्य को बढ़ाएं ।

हमें उम्मीद है कि यह लेख आपके लिए मददगार साबित होगा! अगर आपको इस सुविधा के बारे में कोई चिंता है, तो आगे की सहायता के लिए हमारी टीम से संपर्क करने में संकोच न करें।

संकल्पना समर्थन पर वापस जाएँ