स्थानीय रूप से WordPress में Google फोंट कैसे लोड करें: एक ऑप्टिमाइज़ेशन आइटम GTmetrix, Phatt और Google पेजस्पीड इनसाइट्स में पाया जाता है

यदि आपकी वर्डप्रेस साइट है Google फ़ॉन्ट में त्रुटियाँ GTmetrix/pingdom, स्थानीय रूप से Google फ़ॉन्ट्स लोड करना उन्हें ठीक करना चाहिए.


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

परिवर्तन करने से पहले अपनी साइट का पूरा बैकअप लें (या कम से कम आप जो संपादन कर रहे हैं).

गूगल-फ़ॉन्ट्स-GTmetrix

Contents

चरण 1: एक Google फ़ॉन्ट चुनें

इस उदाहरण में, हम उपयोग करेंगे रोबोटो फॉन्ट दो फ़ॉन्ट वजन के साथ: नियमित (400) और बोल्ड (700).

गूगल-फ़ॉन्ट्स-चुनाव

कम Google फ़ॉन्ट्स का उपयोग करें – अपने Google फ़ॉन्ट्स को न्यूनतम (कम फ़ॉन्ट = कम अनुरोध) पर रखें.

फ़ॉन्ट वजन के साथ चयनात्मक हो – भार की संख्या लोड समय को भी प्रभावित करती है। यदि आपको केवल बोल्ड संस्करण की आवश्यकता है, तो अन्य वज़न को अनचेक करें ताकि Google फ़ॉन्ट्स केवल उन लोगों को लोड करें जिनकी आपको आवश्यकता है.

चरण 2: फ़ॉन्ट डाउनलोड करें

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

गूगल-फ़ॉन्ट्स-डाउनलोड

चरण 3: फ़ॉन्ट्स को वेब फ़ॉन्ट्स में बदलें

इसके बाद, हम इन फ़ॉन्ट फ़ाइलों (.ttf) को वेब फ़ॉन्ट फ़ाइलों में परिवर्तित करेंगे। मैं उपयोग कर रहा हूँ Transfonter. उनकी साइट पर जाएं, क्लिक करें फ़ॉन्ट्स जोड़ें, फिर केवल वे फ़ॉन्ट प्रकार अपलोड करें जो आप अपनी वेबसाइट पर उपयोग कर रहे हैं. मैं उपयोग कर रहा हूँ रोबोटो-Regular.ttf तथा रोबोटो-Bold.ttf इसलिए मेरे पास नियमित और बोल्ड वेट दोनों हैं। WOFF और WOFF2 सभी प्रमुख ब्राउज़रों को कवर करने के बाद से सेटिंग्स को डिफ़ॉल्ट के रूप में छोड़ दें। अब Convert पर क्लिक करें.

Transfonter-गूगल-फ़ॉन्ट-रूपांतरण

केवल अपनी वेबसाइट पर आपके द्वारा उपयोग किए जाने वाले फ़ॉन्ट प्रकारों का चयन करें …

गूगल-फ़ॉन्ट्स-रूपांतरण-चुनाव

चरण 4: परिवर्तित फ़ॉन्ट फ़ाइलें डाउनलोड करें

एक बार जब फोंट परिवर्तित हो जाते हैं, तो आप उन्हें डाउनलोड कर सकते हैं। ज़िप फ़ाइल में, प्रत्येक फ़ॉन्ट में WOFF और WOFF2 प्रारूप शामिल होंगे (चूंकि हमने 2 फ़ॉन्ट डाउनलोड किए, हमारे पास कुल 4 फ़ॉन्ट फ़ाइलें होंगी).

WOFF-गूगल-फ़ॉन्ट-रूपांतरण

चरण 5: WordPress फ़ाइलों के लिए फ़ॉन्ट फ़ाइलें अपलोड करें

आदर्श रूप में FTP या cPanel के माध्यम से वेब फ़ॉन्ट फ़ाइलों को अपलोड करें WP-content / अपलोड फ़ोल्डर इसलिए थीम और कोर अपडेट उन्हें ओवरराइड नहीं करते हैं। मैंने एक “फोंट” फ़ोल्डर बनाया और उन्हें वहां अपलोड किया (उन्हें अन्य फ़ाइलों से अलग करने के लिए)। यह पुष्टि करने के लिए कि वे सफलतापूर्वक अपलोड किए गए हैं और आपके पास सही लिंक हैं, अपने ब्राउज़र में लिंक खोलें और फोंट डाउनलोड करना शुरू कर दें.

उदाहरण:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

बदलने के yourwebsite.com अपनी खुद की वेबसाइट के साथ (और SSL का उपयोग करते हुए HTTPS)। आदर्श रूप से, सभी 4 लिंक का परीक्षण करें और सुनिश्चित करें कि आपके पास URL सही हैं (और उन्हें कहीं सहेजना भी सुनिश्चित करें).

चरण 6: सीएसएस में कस्टम फ़ॉन्ट जोड़ें

इसके बाद, हम आपके द्वारा डाउनलोड की गई ज़िप फ़ाइल के अंदर सीएसएस जोड़ देंगे stylesheet.css. यह सीएसएस कोड है जो आपके फोंट को आपके मौजूदा सीएसएस से जोड़ देगा और उन्हें उपयोग करने के लिए तैयार कर देगा.

जहां सीएसएस कोड व्यक्तिपरक है, लेकिन आप एक बाहरी स्टाइलशीट या वर्डप्रेस का उपयोग कर सकते हैं wp_enqueue_style function.php में, या अपने शुरू में कार्य करें style.css फ़ाइल (या कस्टम सीएसएस अगर आपके पास एक है)। मैं इसे थीम की डिफ़ॉल्ट शैली .css फ़ाइल में पेस्ट करने जा रहा हूं। स्टाइलशीट में कोड को कॉपी / पेस्ट करें और किसी भी संबंधित URL को निरपेक्ष URL में बदलें.

स्टाइलशीट में डिफ़ॉल्ट URL.css:
src: url (‘Roboto-Bold.woff2’) प्रारूप (‘woff2’),
url (‘Roboto-Bold.woff’) प्रारूप (‘woff’);

इन्हें बदलें:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2 ‘) प्रारूप (‘ woff2 ‘),
यूआरएल ( ‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘) प्रारूप (‘ woff ‘);

असल में, फॉन्‍ट फाइलनाम से पहले केवल फ़ोल्डर URL शामिल करें.

यह वैकल्पिक है, लेकिन यदि आप पसंद करते हैं, तो मौजूदा HTML में आसानी से फ़ॉन्ट का उपयोग करने के लिए एक कस्टम वर्ग बनाएं। यहां हमने अपनी कक्षाओं का नाम रखा roboto_font तथा roboto_bold_font. ऐसा करने के लिए, इसे अपनी शैली में जोड़ें। फ़ाइल (उपरोक्त कोड के बाद):

.रॉबोटो_फोंट {

फ़ॉन्ट-परिवार: “रोबोटो”, “एरियल”, संस-सेरिफ़;

}

.roboto_bold_font {

फ़ॉन्ट-परिवार: “रोबोटो”, “एरियल”, संस-सेरिफ़;

फोंट की मोटाई: बोल्ड;

}

चरण 7: फ़ॉन्ट का परीक्षण करें

अब एक परीक्षण पृष्ठ बनाएं और निम्नलिखित कोड को इसमें रखें पाठ संपादक

परिक्षण

कस्टम फ़ॉन्ट परीक्षण

कस्टम फ़ॉन्ट परीक्षण

गूगल-फ़ॉन्ट्स-परीक्षण

पृष्ठ का पूर्वावलोकन करें। यदि आपने इसे सही ढंग से किया है, तो आपको नया कस्टम फ़ॉन्ट देखना चाहिए! पहला शीर्षक आपकी वेबसाइट का डिफ़ॉल्ट फ़ॉन्ट है, दूसरा और तीसरा Google फ़ॉन्ट्स हैं जिन्हें हमने जोड़ा था:

स्थानीय Google द्वारा फ़ॉन्ट्स

चरण 8: डिफ़ॉल्ट फ़ॉन्ट सेट करें

अपनी वेबसाइट का डिफ़ॉल्ट फ़ॉन्ट बनाने के लिए, इस CSS को अपनी शैली में जोड़ें। फाइल:

तन {

फ़ॉन्ट-परिवार: “रोबोटो”, “एरियल”, संस-सेरिफ़;

}

सावधान रहे! यदि आपके पास पहले से ही एक कस्टम फ़ॉन्ट है, तो यह सही ढंग से प्रकट नहीं हो सकता है और मौजूदा फ़ॉन्ट-पारिवारिक गुणों को डीबग करना या संपादित करना आवश्यक है और उन्हें इसके साथ प्रतिस्थापित करना.

स्टेप 9: ऑलवेज हैव फॉलबैक

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

बिना कमबैक के:
फ़ॉन्ट-परिवार: ‘रोबोटो’;

फ़ॉलबैक फ़ॉन्ट के साथ:
फ़ॉन्ट-परिवार: ‘रोबोटो’, एरियल, सान्स सेरिफ़;

अब, यदि यह आपके Google फ़ॉन्ट्स को लोड करने में विफल रहता है, तो ब्राउज़र एरियल फ़ॉन्ट या सिस्टम के डिफ़ॉल्ट सैंस-सेरिफ़ फ़ॉन्ट प्रकार पर वापस आ जाएगा और फ़ॉन्ट रेंडरिंग के साथ किसी भी समस्या का कारण नहीं होगा.

अपनी वेबसाइट पर जाएं (GTmetrix में)

आपको इसमें कोई Google फ़ॉन्ट्स त्रुटियां नहीं दिखनी चाहिए …

नई GTmetrix-Report.png

कोई सवाल? मुझे लघु – संदेश भेज देना.

बार बार पूछे जाने वाले प्रश्न

&# X2705; आप Google फ़ॉन्ट्स कैसे गति करते हैं?

Google फ़ॉन्ट्स का संयोजन, उन्हें स्थानीय रूप से होस्ट करना, और उन्हें प्री-कनेक्ट करना और प्रीफेक्ट करना सभी उनके लोड समय को बेहतर बनाने में मदद कर सकते हैं। अपने फोंट का एक बेंचमार्क प्राप्त करने के लिए अपने GTmetrix झरने की जांच करें, फिर अनुकूलन के बाद इसे पुनः प्राप्त करें.

&# X2705; फॉन्ट को वेब फॉन्ट फाइल्स में कैसे कन्वर्ट करें?

हम Transfonter का उपयोग करते हैं.

&# X2705; एलिमेंट कस्टम फोंट के बारे में क्या?

एलिमेंट कस्टम फ़ॉन्ट्स Google फ़ॉन्ट्स को स्थानीय रूप से होस्ट कर सकते हैं और यह एलिमेंट इन प्रो। आप अपनी फ़ॉन्ट फ़ाइलों को अपलोड करने के लिए इसका उपयोग कर सकते हैं.

&# X2705; कौन से प्लगइन्स फोंट को ऑप्टिमाइज़ करने में मदद करते हैं?

WP रॉकेट, OMGF, Autoptimize, और Perfmatters सभी फोंट को अनुकूलित करने में आपकी सहायता कर सकते हैं.

&# X2705; Prefetching और Preconnecting फोंट के बारे में क्या?

ये ब्राउज़र को बेहतर ढंग से अनुमान लगाने में मदद करके फोंट को गति दे सकते हैं। हम प्राथमिकता देने और फोंट को प्री-कनेक्ट करने के लिए Kinsta द्वारा परफ़ॉर्मर्स प्लगइन का उपयोग करते हैं, लेकिन आप WP रॉकेट या प्री पार्टी रिसोर्स संकेत प्लगइन का भी उपयोग कर सकते हैं.

चियर्स,
ओसामा

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map