रोबोटो फॉन्ट गूगल द्वारा बनाया गया एक सैंस-सेरिफ टाइपफेस है। यह सुंदर है और एंड्रॉइड फोन जैसे हाई-रिजॉल्यूशन स्क्रीन पर अच्छी तरह रेंडर होता है। इसलिए, यह कई एप्लिकेशन के लिए एकदम फिट बैठता है। इससे भी बड़ी बात यह है कि विंडोज, macOS और लिनक्स पर रोबोटो फॉन्ट इंस्टॉल करना बेहद आसान है।
इस पोस्ट में, हम आपको दिखाएंगे कि गूगल रोबोटो फॉन्ट को विंडोज, macOS, लिनक्स और यहां तक कि आपकी वेबसाइट पर कैसे इंस्टॉल किया जाए। चलिए शुरू करते हैं!
गूगल रोबोटो फॉन्ट डाउनलोड करना
आपके प्लेटफॉर्म चाहे जो भी हो, पहले आपको रोबोटो फॉन्ट पैक डाउनलोड करना होगा। इसके लिए, रोबोटो फॉन्ट साइट पर जाएं। पूरे फॉन्ट परिवार को डाउनलोड करने का सबसे आसान तरीका "डाउनलोड फैमिली" बटन पर क्लिक करना है।
यह आपके कंप्यूटर पर एक ZIP फाइल के रूप में सेव होगा, जिसके बाद आप इसे अपने ऑपरेटिंग सिस्टम (OS) पर इंस्टॉल कर सकेंगे।
विंडोज, मैक और लिनक्स पर गूगल रोबोटो फॉन्ट कैसे इंस्टॉल करें
अच्छी खबर यह है कि आप जिस भी प्लेटफॉर्म पर रोबोटो फॉन्ट इंस्टॉल करना चाहते हों, इसमें बस कुछ ही क्लिक लगते हैं।
1. विंडोज 10
विंडोज के लिए, पहले रोबोटो फॉन्ट फोल्डर को अनजिप करें। फिर, स्टार्ट मेन्यू पर जाएं और सेटिंग्स पेज खोलें।
यहां से, पर्सनलाइजेशन विकल्प पर क्लिक करें, फिर फॉन्ट्स पर।
अब, निकाले गए फॉन्ट्स को इंस्टॉलर विंडो पर ड्रैग करें। कुछ सेकंड बाद, गूगल रोबोटो फॉन्ट विंडोज में इंस्टॉल हो जाएगा। आप इसे अपने इंस्टॉल किए गए एप्लिकेशन में किसी अन्य फॉन्ट की तरह ही चुन सकते हैं।
2. macOS
मैक के लिए, पहले ZIP फाइल को एक्सट्रैक्ट करें, फिर फोल्डर के अंदर सभी फॉन्ट्स को चुनें (LICENSE.txt को छोड़कर), राइट-क्लिक करें, और कॉन्टेक्स्ट मेनू से "ओपन विद → फॉन्ट बुक" चुनें।
यह उन्हें फॉन्ट बुक में लोड कर देगा और आपके एप्लिकेशन में उपयोग के लिए उपलब्ध करा देगा।
ध्यान दें कि आप अलग-अलग फॉन्ट फाइलों पर डबल-क्लिक करके भी उन्हें फॉन्ट बुक में लोड कर सकते हैं।
3. लिनक्स
अपना होम फोल्डर खोलें और हिडन फाइल्स/फोल्डर्स देखने का विकल्प इनेबल करें। ".fonts" फोल्डर ढूंढें। यदि यह मौजूद नहीं है, तो इसे बनाएं। फिर, रोबोटो फॉन्ट फोल्डर को इस ".fonts" फोल्डर में ले जाएं।
वैकल्पिक रूप से, आप अपने फॉन्ट्स को मैनेज करने के लिए फॉन्ट मैनेजर प्रोग्राम का उपयोग कर सकते हैं।
- सॉफ्टवेयर सेंटर या रिपॉजिटरी से फॉन्ट मैनेजर इंस्टॉल करें।
- एक बार इंस्टॉल हो जाने पर, इसे और फॉन्ट्स ऐप को खोलें (फिर से, सर्च बार से)।
- फॉन्ट मैनेजर के अंदर, सुनिश्चित करें कि आप मैनेज टैब पर हैं और प्लस आइकन पर क्लिक करें।
- अपने निकाले गए फॉन्ट फोल्डर पर नेविगेट करें और उन्हें आवश्यकतानुसार जोड़ें।
एक बार जब आप जिन ऐप्स का उपयोग कर रहे हैं उन्हें रीस्टार्ट करेंगे, तो आपको चयन के लिए रोबोटो फॉन्ट उपलब्ध दिखाई देना चाहिए।
वेबसाइट पर गूगल रोबोटो फॉन्ट का उपयोग करना
यदि आप अपनी वेबसाइट पर रोबोटो फॉन्ट का उपयोग करना चाहते हैं, तो आप एक्सटर्नल फॉन्ट को अपने वेबपेज पर एम्बेड करने के लिए CSS3 @font-face सिंटैक्स का उपयोग कर सकते हैं।
FontSquirrel रोबोटो फॉन्ट पेज पर जाएं, "वेबफॉन्ट किट" पर क्लिक करें, फिर अपने पसंदीदा फॉन्ट फॉर्मेट, सबसेट (यदि कोई हो) चुनें और "@फॉन्ट-फेस किट डाउनलोड करें" पर क्लिक करें।
ज़िप्ड फाइल को अपनी वेबसाइट के फॉन्ट फोल्डर में एक्सट्रैक्ट करें। अपना वेब स्टाइलशीट खोलें और निम्नलिखित कोड जोड़ें:
@font-face { font-family: 'Roboto'; src: url('Roboto-Regular-webfont.eot'); src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-Regular-webfont.woff') format('woff'), url('Roboto-Regular-webfont.ttf') format('truetype'), url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('Roboto-Italic-webfont.eot'); src: url('Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-Italic-webfont.woff') format('woff'), url('Roboto-Italic-webfont.ttf') format('truetype'), url('Roboto-Italic-webfont.svg#RobotoItalic') format('svg'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'Roboto'; src: url('Roboto-Bold-webfont.eot'); src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-Bold-webfont.woff') format('woff'), url('Roboto-Bold-webfont.ttf') format('truetype'), url('Roboto-Bold-webfont.svg#RobotoBold') format('svg'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('Roboto-BoldItalic-webfont.eot'); src: url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-BoldItalic-webfont.woff') format('woff'), url('Roboto-BoldItalic-webfont.ttf') format('truetype'), url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg'); font-weight: bold; font-style: italic; }
@font-face { font-family: 'Roboto'; src: url('Roboto-Thin-webfont.eot'); src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-Thin-webfont.woff') format('woff'), url('Roboto-Thin-webfont.ttf') format('truetype'), url('Roboto-Thin-webfont.svg#RobotoThin') format('svg'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('Roboto-ThinItalic-webfont.eot'); src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-ThinItalic-webfont.woff') format('woff'), url('Roboto-ThinItalic-webfont.ttf') format('truetype'), url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); font-weight: 200; font-style: italic; }
@font-face { font-family: 'Roboto'; src: url('Roboto-Light-webfont.eot'); src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-Light-webfont.woff') format('woff'), url('Roboto-Light-webfont.ttf') format('truetype'), url('Roboto-Light-webfont.svg#RobotoLight') format('svg'); font-weight: 100; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('Roboto-LightItalic-webfont.eot'); src: url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-LightItalic-webfont.woff') format('woff'), url('Roboto-LightItalic-webfont.ttf') format('truetype'), url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg'); font-weight: 100; font-style: italic; }
@font-face { font-family: 'Roboto'; src: url('Roboto-Medium-webfont.eot'); src: url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-Medium-webfont.woff') format('woff'), url('Roboto-Medium-webfont.ttf') format('truetype'), url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('Roboto-MediumItalic-webfont.eot'); src: url('Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-MediumItalic-webfont.woff') format('woff'), url('Roboto-MediumItalic-webfont.ttf') format('truetype'), url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg'); font-weight: 300; font-style: italic; }
सुनिश्चित करें कि आप "src" को फॉन्ट फोल्डर के पथ पर इंगित करने के लिए बदल दें।
अब, आप अपने वेब पेज पर रोबोटो फॉन्ट प्रदर्शित करने के लिए सिंटैक्स font-family:"Roboto"; का उपयोग कर सकते हैं।
निष्कर्ष
गूगल का रोबोटो फॉन्ट हेल्वेटिका और एरियल जैसे मुख्य आधारों का एक स्टाइलिश विकल्प है। इससे भी बड़ी बात यह है कि यह गूगल की मटीरियल डिजाइन पहल में सबसे आगे है। फिर भी, रोबोटो सभी प्रकार के एप्लिकेशन में काम करता है, और इसे विंडोज, macOS, लिनक्स और यहां तक कि आपकी वेबसाइट पर इंस्टॉल करना बहुत आसान है।
यदि आप रोबोटो के प्रशंसक नहीं हैं, तो विभिन्न साइट डिजाइन तत्वों की जांच कैसे करें पर हमारा लेख आपको यह जानने में मदद कर सकता है कि किसी विशिष्ट वेबसाइट पर किन फॉन्ट्स का उपयोग किया जाता है। क्या आप अपने कंप्यूटर पर रोबोटो फॉन्ट का उपयोग करते हैं, और यदि हां, तो किस उद्देश्य के लिए? नीचे कमेंट सेक्शन में हमें बताएं!
