Oh MyUtils

फ़ॉन्ट पेयर फ़ाइंडर - Google Fonts जोड़ी उपकरण ऑनलाइन

कई लेआउट में लाइव पूर्वावलोकन के साथ सही Google Fonts संयोजन खोजें। उपयोग-तैयार CSS कोड जनरेट करें — 100% क्लाइंट-साइड।

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

फ़ॉन्ट पेयर फ़ाइंडर क्या है?

फ़ॉन्ट पेयर फ़ाइंडर एक ऑनलाइन टूल है जो दो फ़ॉन्ट के सामंजस्यपूर्ण संयोजन खोजने में मदद करता है — एक शीर्षक के लिए और एक बॉडी टेक्स्ट के लिए। यह Google Fonts लाइब्रेरी से फ़ॉन्ट ब्राउज़ करने, उन्हें एक साथ प्रीव्यू करने और CSS कोड एक्सपोर्ट करने की सुविधा देता है।

इस टूल का उपयोग कैसे करें?

1. शीर्षक फ़ॉन्ट चुनें। 2. बॉडी फ़ॉन्ट चुनें। 3. टाइपोग्राफी सेटिंग्स समायोजित करें। 4. विभिन्न प्रीव्यू लेआउट (लेख, कार्ड, प्रोफ़ाइल) देखें। 5. क्यूरेटेड जोड़ियाँ आज़माएं। 6. जनरेट किए गए CSS कोड को कॉपी करें।

क्या मेरा डेटा सुरक्षित है?

आपकी टाइपोग्राफी चॉइस 100% निजी हैं और किसी सर्वर को नहीं भेजी जातीं। टूल पूरी तरह आपके ब्राउज़र में चलता है। एकमात्र बाहरी अनुरोध Google Fonts CDN से फ़ॉन्ट फ़ाइलें लोड करने के लिए हैं।

अच्छी फ़ॉन्ट जोड़ी क्या बनाती है?

अच्छी फ़ॉन्ट जोड़ियाँ इन सिद्धांतों का पालन करती हैं: कंट्रास्ट — विभिन्न वर्गीकरण के फ़ॉन्ट जोड़ें। साझा विशेषताएं — समान x-height और अनुपात खोजें। पदानुक्रम — शीर्षक फ़ॉन्ट दृश्य रूप से अलग होना चाहिए। पठनीयता — बॉडी फ़ॉन्ट छोटे आकार में पढ़ने योग्य होने चाहिए।

सेरिफ़, सैंस-सेरिफ़, डिस्प्ले, हस्तलेख और मोनोस्पेस फ़ॉन्ट में क्या अंतर है?

सेरिफ़ में अक्षरों के सिरों पर सजावटी स्ट्रोक होते हैं (जैसे: Merriweather)। सैंस-सेरिफ़ बिना सजावट के साफ़ होते हैं (जैसे: Roboto)। डिस्प्ले बड़े आकार के लिए सजावटी हैं (जैसे: Lobster)। हस्तलेख हाथ से लिखे जैसे दिखते हैं (जैसे: Caveat)। मोनोस्पेस में सभी वर्ण समान चौड़ाई के होते हैं (जैसे: Fira Code)।

क्या मैं जनरेट किए गए CSS को सीधे अपने प्रोजेक्ट में उपयोग कर सकता हूँ?

हाँ। एक्सपोर्ट पैनल प्रोडक्शन-रेडी कोड जनरेट करता है जिसमें HTML <link> टैग, CSS @import स्टेटमेंट और सिस्टम फ़ॉन्ट फ़ॉलबैक के साथ font-family डिक्लेरेशन शामिल हैं।

कोड उदाहरण

// Font Pair Finder - Dynamic Google Font Loading

function loadGoogleFont(family, weights = [400, 700]) {
  const weightsStr = weights.join(";");
  const url = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:wght@${weightsStr}&display=swap`;

  if (document.querySelector(`link[href="${url}"]`)) return;

  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = url;
  document.head.appendChild(link);
}

function generatePairingCSS(headingFont, bodyFont, options = {}) {
  const { headingSize = 36, bodySize = 16, headingWeight = 700, bodyWeight = 400, lineHeight = 1.5 } = options;

  return `h1, h2, h3 {
  font-family: '${headingFont}', system-ui, sans-serif;
  font-weight: ${headingWeight};
  font-size: ${headingSize}px;
}

body, p {
  font-family: '${bodyFont}', system-ui, sans-serif;
  font-weight: ${bodyWeight};
  font-size: ${bodySize}px;
  line-height: ${lineHeight};
}`;
}

loadGoogleFont("Montserrat", [400, 700]);
loadGoogleFont("Open Sans", [400, 600]);
console.log(generatePairingCSS("Montserrat", "Open Sans"));

संबंधित उपकरण