वेब-फ़ॉन्ट (Google web fonts: http://code.google.com/webfonts) कुछ ही महीनों में बहुत ही रोचक और प्रयोग में आसान बन गये हैं। इसलिए गूगल ने font API को चालू किया है, बिना इसके मनचाहे फ़ॉन्ट को ब्लॉगर के साथ प्रयोग करना बहुत कठिन था।
अब मैं आपको बताऊँगा कि गूगल Font API की सहायता से किस प्रकार अपने ब्लॉगर टेम्पलेट की सुन्दरता को बढ़ाया जाये।
गूगल की Font API क्या है?
गूगल Font API किसी भी बेव-पृष्ठ पर आपने मनचाहे फ़ॉन्ट को दर्शाने की सुविधा प्रदान करता है। हम व्यक्तिगत और व्यावसायिक दोनों प्रकार के उपयोग के लिए विभिन्न उच्च गुणवत्ता वाले ओपेन-सोर्स वेब-फ़ॉन्ट प्रयोग मनचाहे ढंग से कर सकते हैं और मेरी मानिए तो ऐसा करना बहुत ही सरल है।
किस प्रकार के फ़ॉन्ट हम प्रयोग कर पायेंगे?
सभी प्रकार के उपलब्ध फ़ॉन्ट गूगल फ़ॉन्ट डायरेकट्री में चुने जा सकते हैं। उदाहरण के तौर पर नीचे दिये गये चित्र को देखें।
अभी उपलब्ध फ़ॉन्ट की संख्या अवश्य ही कम है किन्तु गूगल के इस परियोजना में बहुत से अन्य ओपेन-सोर्स फ़ॉन्ट डेवलपर के जुड़ने की अच्छी संभावनाएँ दिखायी दे रही हैं।
किस प्रकार Google Font API का प्रयोग करें?
Google Font API द्वारा विभिन्न प्रकार के फ़ॉन्टस् का प्रदर्शन बहुत ही सरल है और इसे लागू करने में कुछ मिनट ही लगते हैं।
प्रथम आपको गूगल फ़ॉन्ट डायरेक्ट्री में से प्रयोग के लिए किसी फ़ॉन्ट का चुनाव करना है। उस फ़ॉन्ट पर किल्क करें जिसका कि आपको अपने ब्लॉग पर प्रयोग करना है, आप विभिन्न आकारों का भी चयन कर सकते हैं।
उदाहरण के लिए निम्न चित्र देखें।
अब Get the code Tab पर क्लिक करें, इसके बाद आपको वह कोड प्राप्त हो जायेगा जिसका प्रयोग आपको आपने ब्लॉगर टेम्पलेट के साथ करना है।
अब इस कोड को कॉंपी कर लीजिए और ब्लॉगर डैशबोर्ड पर जाइए फिर नीचे के सभी चरण पूरे कीजिए
Design > Edit HTML > अब अपने ब्राउज़र के खोज सुविधा (Ctrl+f) का प्रयोग करके <head> टैग को प्राप्त कीजिए
अब जो कोड आपने क्लिपबोर्ड पर कापी किया हुआ था उसे ठीक इस टैग के नीचे पेस्ट कर दें
ध्यान रहे कि / को आपको नीचे दिये गये कोड की भाँति उपरोक्त कोड में अवश्य जोड़ना है
ऐसा करना अभी आवश्यक मुझे पता है कि गूगल strict HTML markup कोड के लिए इसे जल्द ही ठीक कर लेगा
अब निश्चिंत होकर अपना टेप्लेट सहेज (Save कर) दें।
मैं अब जो चरण आपको बताने जा रहा हूँ वह बहुत ही आवश्यक है यह बदलाव किये बिना आप गूगल Font API का प्रयोग नहीं कर पायेंगे अर्थात् चुना गया फ़ॉन्ट दिखायी नहीं देगा। वह कहाँ और कैसा दिखायी दे हमें इसके लिए कुछ और नये परिवर्तनों को अवश्यकता रहेगी, इसके लिए आपको </b:skin> कोड के ठीक ऊपर इस कोड को पेस्ट करना होगा।
जहाँ पर Cantarell चुने गये फ़ॉन्ट का नाम है, इसे आपके अपने मनचाहे नाम से बदलना आवश्यक है।
ब्लॉगर के साथ प्रयोग में आने वाले डिफ़ॉल्ट CSS Statements नीचे दिये जा रहे हैं जिनकी सहायता से आप विभिन्न टेक्ट क्षेत्रों में मनचाहे फ़ॉन्ट प्रयोग कर पायेंगे।
Description ---------------------------------- Reference
The header section (title and description) --- #header
Blog title -------------------------------------- h1
Post titles -------------------------------------.post-title
Body of blog posts --------------------------- .post-body
Sidebar headings ----------------------------- #sidebar h2
Sidebar text ---------------------------------- #sidebar .widget-content
Footer section -------------------------------- .footer
जब आप इन style statements को ठीक प्रकार से जोड़ लें तो आप अपने टेम्पलेट का प्रिव्यू (preview) देख लें। इससे संभावित परिणाम प्राप्त हो जायेंगे। अब आप पुन: टेम्पलेट सहेज दें।
आशा है इस सुविधा के प्रयोग से आपको बहुत लाभ होगा, धन्यवाद!
अब मैं आपको बताऊँगा कि गूगल Font API की सहायता से किस प्रकार अपने ब्लॉगर टेम्पलेट की सुन्दरता को बढ़ाया जाये।
गूगल की Font API क्या है?
गूगल Font API किसी भी बेव-पृष्ठ पर आपने मनचाहे फ़ॉन्ट को दर्शाने की सुविधा प्रदान करता है। हम व्यक्तिगत और व्यावसायिक दोनों प्रकार के उपयोग के लिए विभिन्न उच्च गुणवत्ता वाले ओपेन-सोर्स वेब-फ़ॉन्ट प्रयोग मनचाहे ढंग से कर सकते हैं और मेरी मानिए तो ऐसा करना बहुत ही सरल है।
किस प्रकार के फ़ॉन्ट हम प्रयोग कर पायेंगे?
सभी प्रकार के उपलब्ध फ़ॉन्ट गूगल फ़ॉन्ट डायरेकट्री में चुने जा सकते हैं। उदाहरण के तौर पर नीचे दिये गये चित्र को देखें।
अभी उपलब्ध फ़ॉन्ट की संख्या अवश्य ही कम है किन्तु गूगल के इस परियोजना में बहुत से अन्य ओपेन-सोर्स फ़ॉन्ट डेवलपर के जुड़ने की अच्छी संभावनाएँ दिखायी दे रही हैं।
किस प्रकार Google Font API का प्रयोग करें?
Google Font API द्वारा विभिन्न प्रकार के फ़ॉन्टस् का प्रदर्शन बहुत ही सरल है और इसे लागू करने में कुछ मिनट ही लगते हैं।
प्रथम आपको गूगल फ़ॉन्ट डायरेक्ट्री में से प्रयोग के लिए किसी फ़ॉन्ट का चुनाव करना है। उस फ़ॉन्ट पर किल्क करें जिसका कि आपको अपने ब्लॉग पर प्रयोग करना है, आप विभिन्न आकारों का भी चयन कर सकते हैं।
उदाहरण के लिए निम्न चित्र देखें।
अब Get the code Tab पर क्लिक करें, इसके बाद आपको वह कोड प्राप्त हो जायेगा जिसका प्रयोग आपको आपने ब्लॉगर टेम्पलेट के साथ करना है।
अब इस कोड को कॉंपी कर लीजिए और ब्लॉगर डैशबोर्ड पर जाइए फिर नीचे के सभी चरण पूरे कीजिए
Design > Edit HTML > अब अपने ब्राउज़र के खोज सुविधा (Ctrl+f) का प्रयोग करके <head> टैग को प्राप्त कीजिए
अब जो कोड आपने क्लिपबोर्ड पर कापी किया हुआ था उसे ठीक इस टैग के नीचे पेस्ट कर दें
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
ध्यान रहे कि / को आपको नीचे दिये गये कोड की भाँति उपरोक्त कोड में अवश्य जोड़ना है
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css' />
ऐसा करना अभी आवश्यक मुझे पता है कि गूगल strict HTML markup कोड के लिए इसे जल्द ही ठीक कर लेगा
अब निश्चिंत होकर अपना टेप्लेट सहेज (Save कर) दें।
मैं अब जो चरण आपको बताने जा रहा हूँ वह बहुत ही आवश्यक है यह बदलाव किये बिना आप गूगल Font API का प्रयोग नहीं कर पायेंगे अर्थात् चुना गया फ़ॉन्ट दिखायी नहीं देगा। वह कहाँ और कैसा दिखायी दे हमें इसके लिए कुछ और नये परिवर्तनों को अवश्यकता रहेगी, इसके लिए आपको </b:skin> कोड के ठीक ऊपर इस कोड को पेस्ट करना होगा।
h2.post-title {font-family: Cantarell, Sans=Serif;}
जहाँ पर Cantarell चुने गये फ़ॉन्ट का नाम है, इसे आपके अपने मनचाहे नाम से बदलना आवश्यक है।
ब्लॉगर के साथ प्रयोग में आने वाले डिफ़ॉल्ट CSS Statements नीचे दिये जा रहे हैं जिनकी सहायता से आप विभिन्न टेक्ट क्षेत्रों में मनचाहे फ़ॉन्ट प्रयोग कर पायेंगे।
Description ---------------------------------- Reference
The header section (title and description) --- #header
Blog title -------------------------------------- h1
Post titles -------------------------------------.post-title
Body of blog posts --------------------------- .post-body
Sidebar headings ----------------------------- #sidebar h2
Sidebar text ---------------------------------- #sidebar .widget-content
Footer section -------------------------------- .footer
जब आप इन style statements को ठीक प्रकार से जोड़ लें तो आप अपने टेम्पलेट का प्रिव्यू (preview) देख लें। इससे संभावित परिणाम प्राप्त हो जायेंगे। अब आप पुन: टेम्पलेट सहेज दें।
आशा है इस सुविधा के प्रयोग से आपको बहुत लाभ होगा, धन्यवाद!
Post a Comment