Developer Tools
Text Toolsफ़ॉन्ट प्रीव्यू टूल
कस्टम टेक्स्ट, साइज़, वेट और रंग के साथ कोई भी Google Font देखें। तुरंत CSS इम्पोर्ट कोड जेनरेट करें। मुफ़्त ऑनलाइन फ़ॉन्ट प्रीव्यू टूल।
लोकप्रिय फ़ॉन्ट
Style
Browser Support
Style Tags
216 fonts
लाइव प्रीव्यू
The quick brown fox jumps over the lazy dog
फ़ॉन्ट प्रीव्यू
फ़ॉन्ट नाम:Roboto
फ़ॉन्ट साइज़:32px
फ़ॉन्ट वेट:400
CSS कोड
CSS font-family:
font-family: 'Roboto', sans-serif;Google Fonts इम्पोर्ट URL:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');Full CSS snippet
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 32px;
color: #1e293b;
}संबंधित टूल्स
फ़ॉन्ट प्रीव्यू टूल के बारे में
यह कैसे काम करता है
- कोई भी Google Fonts फ़ैमिली नाम दर्ज करें या पॉपुलर लिस्ट से चुनें
- फ़ॉन्ट आपके ब्राउज़र में Google Fonts API के माध्यम से डायनामिक रूप से लोड होता है
- आदर्श कॉन्फ़िगरेशन देखने के लिए वेट, साइज़, रंग और बैकग्राउंड एडजस्ट करें
- अपने प्रोजेक्ट में उपयोग के लिए CSS font-family डिक्लेरेशन या इम्पोर्ट URL कॉपी करें
- प्रीसेट सैंपल टेक्स्ट के बीच स्विच करें या कस्टम टेक्स्ट दर्ज करें
सामान्य उपयोग के मामले
- नए वेब प्रोजेक्ट के लिए सही टाइपफेस चुनना
- एक ही फ़ॉन्ट के अलग-अलग वेट विभिन्न साइज़ में कैसे दिखते हैं, तुलना करना
- Google Font के लिए सही CSS इम्पोर्ट स्निपेट जेनरेट करना
- ब्राउज़र छोड़े बिना क्लाइंट को फ़ॉन्ट विकल्प दिखाना
- डेटा-हेवी UI के लिए नंबर और सिंबल रेंडरिंग जाँचना
अक्सर पूछे जाने वाले प्रश्न
फ़ॉन्ट प्रीव्यू टूल क्या है?
फ़ॉन्ट प्रीव्यू टूल आपको किसी भी Google Fonts फ़ैमिली को लोड करने, उसके वेट, साइज़, रंग और बैकग्राउंड को एडजस्ट करने, कस्टम टेक्स्ट के साथ प्रीव्यू करने और CSS इम्पोर्ट कोड कॉपी करने की सुविधा देता है — सब कुछ सीधे आपके ब्राउज़र में।
Google Font का प्रीव्यू कैसे करें?
सर्च बॉक्स में Google Font का नाम टाइप करें (जैसे 'Playfair Display') और 'फ़ॉन्ट लोड करें' पर क्लिक करें, या पॉपुलर फ़ॉन्ट्स लिस्ट से कोई नाम चुनें।
क्या मैं कोई भी Google Font उपयोग कर सकता हूँ?
हाँ। आप Google Fonts पर उपलब्ध किसी भी फ़ॉन्ट का सटीक नाम टाइप कर सकते हैं। टूल स्वचालित रूप से सही API URL बनाता है और सभी उपलब्ध वेट (100–900) लोड करता है।
कौन से फ़ॉन्ट वेट सपोर्ट हैं?
टूल Google Fonts से 100 से 900 तक के वेट रिक्वेस्ट करता है। यदि किसी फ़ॉन्ट में कोई विशेष वेट नहीं है, तो ब्राउज़र सबसे नज़दीकी उपलब्ध वेट रेंडर करेगा।
अपने प्रोजेक्ट के लिए CSS कोड कैसे कॉपी करें?
फ़ॉन्ट लोड होने के बाद, दाईं पैनल में CSS Code सेक्शन में जाएं। प्रत्येक स्निपेट के बगल में कॉपी बटन का उपयोग font-family डिक्लेरेशन, @import URL या पूरे CSS ब्लॉक को कॉपी करने के लिए करें।
कौन से सैंपल टेक्स्ट उपलब्ध हैं?
छह प्रीसेट दिए गए हैं: पैंग्राम, अल्फाबेट, नंबर और सिंबल, Lorem Ipsum, हेडलाइन उदाहरण और पैराग्राफ उदाहरण। आप कस्टम टेक्स्ट फ़ील्ड में अपना टेक्स्ट भी टाइप कर सकते हैं।
क्या यह टूल डेटा स्टोर करता है?
नहीं। फ़ॉन्ट प्रीव्यू टूल पूरी तरह ब्राउज़र-आधारित है। यह सार्वजनिक Google Fonts API के माध्यम से फ़ॉन्ट लोड करता है और किसी सर्वर पर कुछ भी स्टोर नहीं करता।
क्या मैं टेक्स्ट रंग और बैकग्राउंड बदल सकता हूँ?
हाँ। Colors सेक्शन में कलर पिकर का उपयोग करके टेक्स्ट और प्रीव्यू बैकग्राउंड के लिए कोई भी HEX रंग चुनें। यह कंट्रास्ट रेशियो जाँचने के लिए उपयोगी है।
फ़ॉन्ट लोड क्यों नहीं होता?
लोडिंग फेल हो सकती है यदि फ़ॉन्ट का नाम गलत टाइप किया गया हो, फ़ॉन्ट Google Fonts से हटा दिया गया हो, या आपका नेटवर्क fonts.googleapis.com पर रिक्वेस्ट ब्लॉक करता हो।
क्या यह टूल मुफ़्त है?
हाँ, फ़ॉन्ट प्रीव्यू टूल पूरी तरह मुफ़्त है। फ़ॉन्ट Google Fonts CDN द्वारा ओपन-सोर्स लाइसेंस के तहत प्रदान किए जाते हैं।
क्या मैं कई फ़ॉन्ट साथ-साथ compare कर सकता हूँ?
आप पॉपुलर फ़ॉन्ट्स चिप्स का उपयोग करके जल्दी से फ़ॉन्ट बदल सकते हैं। औपचारिक तुलना के लिए, दो ब्राउज़र टैब में अलग-अलग फ़ॉन्ट लोड करके टूल खोलें।
CSS font-family डिक्लेरेशन क्या है?
CSS font-family डिक्लेरेशन ब्राउज़र को बताता है कि कौन सा टाइपफेस उपयोग करना है, फ़ॉलबैक के साथ। उदाहरण: font-family: 'Roboto', sans-serif;