फ़ॉन्ट पेयरिंग एक्सप्लोरर

फ़ॉन्ट पेयरिंग एक्सप्लोरर क्या है?

फ़ॉन्ट पेयरिंग एक्सप्लोरर वेब डिज़ाइनरों, डेवलपरों और कंटेंट निर्माताओं के लिए एक मुफ़्त इन-ब्राउज़र टूल है, जो फ़ॉन्ट लाइब्रेरियों को खंगाले बिना शीर्षक और मुख्य पाठ का सुव्यवस्थित संयोजन चाहते हैं। दो स्वतंत्र, खोजने योग्य पिकर आपको 48 चुने हुए Google Fonts को serif, sans, display या mono के अनुसार फ़िल्टर करने और हर भूमिका के लिए फ़ॉन्ट चुनने देते हैं, जबकि प्रति-भूमिका नियंत्रण वज़न, आकार, पंक्ति-ऊँचाई और अक्षर-अंतराल तय करते हैं। लाइव प्रीव्यू आपके शीर्षक और अनुच्छेद को असली फ़ॉन्ट में रेंडर करता है, और शफ़ल बटन जब प्रेरणा चाहिए तब यादृच्छिक संयोजन सुझाता है। पसंद आने पर, जेनरेट किए गए CSS को अपने पसंदीदा प्रारूप में कॉपी करें — @import नियम, HTML link टैग या Fontsource-शैली npm इम्पोर्ट — और उसे लैंडिंग पेज, ब्लॉग थीम, स्लाइड डेक या डिज़ाइन सिस्टम में डालें।

फ़ॉन्ट पेयरिंग एक्सप्लोरर का उपयोग कैसे करें

1. शीर्षक पिकर में serif, sans, display या mono के अनुसार फ़िल्टर करें, खोजने के लिए टाइप करें, और चुनने के लिए किसी फ़ॉन्ट पर क्लिक करें।
2. अनुच्छेद टेक्स्ट के लिए एक पूरक टाइपफ़ेस चुनने हेतु मुख्य पाठ पिकर में भी वैसा ही करें।
3. हर भूमिका का वज़न, आकार, पंक्ति-ऊँचाई और अक्षर-अंतराल तय करने के लिए सेटिंग्स खोलें।
4. नमूना क्षेत्र में अपना शीर्षक और वाक्य टाइप करें, या डिफ़ॉल्ट टेक्स्ट के लिए इसे खाली छोड़ दें; यादृच्छिक संयोजन विचारों के लिए शफ़ल दबाएँ।
5. आउटपुट प्रारूप चुनें — @import, <link> या Fontsource — और जेनरेट किए गए CSS को अपनी स्टाइलशीट या प्रोजेक्ट में कॉपी करें।

उदाहरण

शीर्षक: Playfair Display 700 · मुख्य पाठ: Source Sans 3 400

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

प्रारूप: <link>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

अक्सर पूछे जाने वाले सवाल

मैं दो फ़ॉन्ट कैसे चुनूँ?

हर भूमिका का अपना पिकर है। कैटलॉग को serif, sans, display या mono के अनुसार फ़िल्टर करें, खोजने के लिए किसी फ़ैमिली नाम का हिस्सा टाइप करें, और चुनने के लिए परिणाम पर क्लिक करें। शीर्षक और मुख्य पाठ स्वतंत्र रूप से चुने जाते हैं, और शफ़ल बटन आपके लिए एक यादृच्छिक जोड़ी चुन देता है।

क्या मैं वज़न, आकार, पंक्ति-ऊँचाई और अक्षर-अंतराल नियंत्रित कर सकता/सकती हूँ?

हाँ। शीर्षक और मुख्य पाठ के लिए अलग-अलग वज़न, पिक्सेल में आकार, पंक्ति-ऊँचाई और अक्षर-अंतराल (em में) तय करने के लिए सेटिंग्स खोलें। हर बदलाव लाइव प्रीव्यू और कॉपी किए गए CSS दोनों में दिखता है।

मैं कौन-से आउटपुट प्रारूप कॉपी कर सकता/सकती हूँ?

तीन: एक CSS @import नियम, preconnect संकेतों वाला HTML <link> टैग, और Fontsource-शैली npm इम्पोर्ट (npm i @fontsource/… के साथ प्रति-वज़न इम्पोर्ट लाइनें)। तीनों में h1–h3 और body के लिए समान font-family, वज़न, आकार, पंक्ति-ऊँचाई और अक्षर-अंतराल नियम शामिल होते हैं।

फ़ॉन्ट कहाँ से आते हैं, और क्या मेरा टेक्स्ट निजी है?

जब आप कोई पेयरिंग चुनते हैं, तो आपका ब्राउज़र केवल उन्हीं दो फ़ैमिली को सीधे fonts.googleapis.com पर Google की सार्वजनिक Fonts CSS API से लोड करता है — यह आपके ब्राउज़र से किया गया तृतीय-पक्ष अनुरोध है, हमारे सर्वरों के माध्यम से नहीं। आपका नमूना टेक्स्ट और सेटिंग्स पूरी तरह आपके डिवाइस पर रहते हैं।

कौन-से फ़ॉन्ट शामिल हैं?

serif, sans-serif, display और monospace में फैले 48 लोकप्रिय Google Fonts का एक चुना हुआ सेट — जिनमें Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono और अन्य शामिल हैं।