Shopify आपके स्टोर के लिए उपयोग करने के लिए सैकड़ों निःशुल्क फ़ॉन्ट प्रदान करता है। हालाँकि, आपको अपने ब्रांड दिशानिर्देश के साथ संरेखित होने के लिए एक कस्टम फ़ॉन्ट का उपयोग करने की आवश्यकता है लेकिन यह Shopify द्वारा समर्थित नहीं है, फिर भी आप इसे अपनी थीम में जोड़ सकते हैं। इसे कैसे करें इस पर एक मार्गदर्शिका यहां दी गई है:
-
सबसे पहले आपको अपना फॉन्ट उपलब्ध कराना होगा। कुछ फ़ॉन्ट के पास लाइसेंस होते हैं, इसलिए सुनिश्चित करें कि आपने उन्हें अपने उपयोग के लिए ठीक से खरीदा है। हमारी सहायता टीम आपके आवश्यक फ़ॉन्ट प्राप्त करने की प्रभारी नहीं होगी।
-
इसके बाद, जोड़ी जाने वाली प्रत्येक फ़ॉन्ट शैली के लिए .woff और .woff2 प्रारूप वाली दो फ़ाइलें तैयार करें। यह सुनिश्चित करना है कि आपका जोड़ा गया फ़ॉन्ट सभी प्रकार के ब्राउज़रों पर पढ़ने योग्य है।
-
पर्याप्त फ़ाइलें होने के बाद, आप उन्हें थीम सेटिंग्स में फ़ाइल फ़ोल्डर में अपलोड करें।
आपकी सभी अपलोड की गई फ़ॉन्ट फ़ाइलों में आपके कॉपी करने के कार्य के लिए फ़ाइल लिंक प्रदान करने के लिए दाईं ओर चेन बटन होता है।
-
इसके बाद, अपने एडमिन डैशबोर्ड पर वापस जाएं, ऑनलाइन स्टोर > थीम्स पर क्लिक करें और आगे संपादित करने के लिए बी योर योर थीम चुनें। क्रियाएँ > कोड संपादित करें पर क्लिक करें।
-
खुली संपादन कोड विंडो में, आप बाएँ हाथ के कॉलम में फ़ोल्डर स्निपेट्स पर जाएँ। इस फ़ोल्डर में, नए फ़ॉन्ट के लिए कुछ कस्टम कोड जोड़ने के लिए फ़ाइल "css-variables.liquid" पर क्लिक करें।
-
फ़ाइल में "css-variables.liquid" खोलें, आप टैब शैली के अंतर्गत अतिरिक्त कोड जोड़ते हैं। इसे टेक्स्ट {%- style -%} के अंतर्गत पाया जा सकता है। कोड इस प्रकार जोड़े गए हैं:
@फॉन्ट फ़ेस {
फ़ॉन्ट-फ़ैमिली: " MyFontHeading ";
src: url(' अपना फ़ॉन्ट फ़ाइल लिंक जोड़ें ') प्रारूप("woff2"),
यूआरएल (' अपना फ़ॉन्ट फ़ाइल लिंक जोड़ें ') प्रारूप ("वॉफ़"); }@फॉन्ट फ़ेस {
फ़ॉन्ट-फ़ैमिली: " MyFontBody ";
src: url(' अपना फ़ॉन्ट फ़ाइल लिंक जोड़ें ') प्रारूप("woff2"),
यूआरएल (' अपना फ़ॉन्ट फ़ाइल लिंक जोड़ें ') प्रारूप ("वॉफ़"); }ध्यान दें : इटैलिक टेक्स्ट अनुभाग आपके द्वारा अनुकूलित किए गए हैं। जोड़े जाने वाले @font-face{ } कोड की संख्या इस बात पर निर्भर करती है कि आपके पास कितनी फ़ॉन्ट शैलियाँ हैं।
- उसके बाद, आप प्रासंगिक कोड लाइन पर नेविगेट करने के लिए "फ़ॉन्ट-बॉडी-फ़ैमिली" टेक्स्ट की खोज करते हैं और चरण 6 के कोड में फ़ॉन्ट-फ़ैमिली के लिए अपने जोड़े गए टेक्स्ट के साथ {{...}} के सभी हिस्सों को बदल देते हैं (हमारे में) उदाहरण के लिए, यह 'MyFontHeading' है)। इसी तरह, "फ़ॉन्ट-हेडिंग-फ़ैमिली" टेक्स्ट खोजें और फ़ॉन्ट-फ़ैमिली लाइन (हमारे उदाहरण में 'MyFontBody') के लिए अपने जोड़े गए टेक्स्ट के साथ {{...}} के सभी हिस्सों को बदलें।
- बदलने के बाद, यह नीचे दी गई तस्वीर जैसा दिखता है:
- अंत में, सहेजें पर क्लिक करें।
टिप्पणी :
- एक बार जब आप इन कोडों को "css-variables.liquid" फ़ाइल में जोड़ लेते हैं, तो थीम सेटिंग्स > टाइपोग्राफी में सेटिंग्स अब प्रभावी नहीं होती हैं, चाहे आप यहां कुछ भी कॉन्फ़िगर करें।
- उपरोक्त सभी निर्देश तब लागू होते हैं जब आप सभी अनुभागों और ब्लॉक के लिए समान कस्टम फ़ॉन्ट लागू करते हैं। यदि आपको विभिन्न अनुभागों या ब्लॉकों के लिए विभिन्न फ़ॉन्ट लागू करने की आवश्यकता है, तो संपादन प्रक्रिया बहुत अधिक जटिल होगी और अधिक सहायता प्राप्त करने के लिए कृपया हमारी सहायता टीम से संपर्क करें।
हमें उम्मीद है कि आपको यह लेख उपयोगी लगेगा! यदि आपको इस सुविधा के बारे में कोई चिंता है, तो आगे की सहायता के लिए हमारी टीम से संपर्क करने में संकोच न करें।
