टूल्समोआह

गूगल फ़ॉन्ट्स व्यूअर

गूगल फ़ॉन्ट्स खोजें और पूर्वावलोकन करें। अपनी वेब परियोजनाओं के लिए सही फ़ॉन्ट ढूंढें और देखें कि वे वास्तविक समय में कैसे दिखते हैं।

फ़ॉन्ट खोज
अपने वांछित फ़ॉन्ट खोजें या फ़िल्टर करें।
Roboto
sans-serif•18 शैलियाँ
Open Sans
sans-serif•12 शैलियाँ
Noto Sans JP
sans-serif•9 शैलियाँ
Montserrat
sans-serif•18 शैलियाँ
Inter
sans-serif•18 शैलियाँ
Poppins
sans-serif•18 शैलियाँ
Lato
sans-serif•10 शैलियाँ
Material Icons
monospace•1 शैलियाँ
Roboto Condensed
sans-serif•18 शैलियाँ
Roboto Mono
monospace•14 शैलियाँ
Roboto
Sans-serif • 18 शैलियाँ
नमस्ते! गूगल फ़ॉन्ट्स व्यूअर। तेज भूरी लोमड़ी आलसी कुत्ते पर कूदती है। 1234567890
कोड प्राप्त करें
अपनी वेब परियोजनाओं में फ़ॉन्ट लागू करने के लिए कोड कॉपी करें।

उपरोक्त कोड को अपनी HTML फ़ाइल के हेड टैग के अंदर पेस्ट करें।

📚 गूगल फ़ॉन्ट्स की पूरी गाइड

गूगल फ़ॉन्ट्स का प्रभावी ढंग से उपयोग करना सीखें

🎨🎨 गूगल फ़ॉन्ट्स क्या है?

गूगल फ़ॉन्ट्स गूगल द्वारा प्रदान की जाने वाली एक मुफ्त वेब फ़ॉन्ट सेवा है।

  • 1,400+ ओपन सोर्स फ़ॉन्ट परिवार
  • वाणिज्यिक उपयोग के लिए मुफ्त लाइसेंस
  • तेज सीडीएन के माध्यम से वैश्विक वितरण
  • विभिन्न भाषाओं और लेखन प्रणालियों के लिए समर्थन
  • उत्तरदायी वेब डिज़ाइन के लिए अनुकूलित

⚡⚡ वेब फ़ॉन्ट्स का उपयोग कैसे करें

1. HTML में उपयोग करना

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

2. सीएसएस में लागू करना

body {
  font-family: 'Noto Sans KR', sans-serif;
}

🚀🚀 प्रदर्शन अनुकूलन युक्तियाँ

  • FOIT को रोकने के लिए font-display: swap का उपयोग करें
  • डीएनएस लुकअप समय को कम करने के लिए preconnect का उपयोग करें
  • केवल आवश्यक फ़ॉन्ट-वेट को चुनिंदा रूप से लोड करें
  • उपसमूह पैरामीटर के साथ वर्ण सेट को सीमित करें
  • स्थानीय फ़ॉन्ट फॉलबैक सेट करें

अनुकूलित लोडिंग उदाहरण:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap&subset=korean" rel="stylesheet">

📱📱 उत्तरदायी टाइपोग्राफी

विभिन्न उपकरणों में इष्टतम पठनीयता के लिए सेटिंग्स:

/* 반응형 폰트 크기 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.6;
}

/* 디바이스별 폰트 스택 */
.font-stack {
  font-family: 
    'Noto Sans KR', 
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    sans-serif;
}
  • 모바일: 16px 이상 권장
  • 태블릿: 18px 이상 권장
  • 데스크톱: 20px 이상 권장

🎯🎯 फ़ॉन्ट चयन गाइड

उपयोग के अनुसार अनुशंसित फ़ॉन्ट:

  • बॉडी टेक्स्ट: नोटो सैन्स केआर, स्पोका हान सैन्स
  • शीर्षक: नोटो सेरिफ़ केआर, गोवुन डोडुम
  • कोड: फ़िरा कोड, जेटब्रेन्स मोनो
  • सजावटी: जुआ, गमजा फ्लावर

चयन मानदंड:

  • ब्रांड पहचान के साथ संगतता
  • पठनीयता और पहुँच क्षमता
  • बहु-भाषा समर्थन सीमा
  • लोडिंग प्रदर्शन

🔧🔧 उन्नत उपयोग

परिवर्तनीय फ़ॉन्ट्स का उपयोग करना:

/* Variable Font 로드 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 동적 weight 조절 */
.dynamic-weight {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight, 400);
  font-variation-settings: 'wght' var(--font-weight, 400);
}

सीएसएस कस्टम गुणों का उपयोग करना:

:root {
  --font-primary: 'Noto Sans KR', sans-serif;
  --font-heading: 'Noto Serif KR', serif;
  --font-mono: 'Fira Code', monospace;
}

h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-primary); }
code { font-family: var(--font-mono); }

🛡️🛡️ पहुँच क्षमता विचार

  • पर्याप्त कंट्रास्ट अनुपात: WCAG 4.5:1 या अधिक
  • उचित लाइन स्पेसिंग: 1.4~1.6 अनुशंसित
  • पठनीय फ़ॉन्ट आकार: न्यूनतम 16px
  • डिस्लेक्सिया-अनुकूल: ओपनडिस्लेक्सिक आदि पर विचार करें।

पहुँच योग्य सीएसएस उदाहरण:

.accessible-text {
  font-size: max(16px, 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

🔍🔍 डिबगिंग और परीक्षण

फ़ॉन्ट लोडिंग सत्यापन:

  • डेवटूल्स नेटवर्क टैब में फ़ॉन्ट फ़ाइलों की जाँच करें
  • गणना की गई शैलियों में वास्तविक लागू फ़ॉन्ट की जाँच करें
  • फ़ॉन्ट-डिस्प्ले व्यवहार का परीक्षण करें

प्रदर्शन माप उपकरण:

  • गूगल पेजस्पीड इनसाइट्स
  • वेबपेजटेस्ट
  • लाइटहाउस फ़ॉन्ट अनुकूलन जाँच

폰트 fallback 테스트:

/* 네트워크 차단 시 fallback 확인 */
font-family: 'Custom Font', 
             'Apple SD Gothic Neo', 
             'Malgun Gothic', 
             sans-serif;

💡💡 व्यावहारिक युक्तियाँ

परियोजना सेटअप:

  • डिज़ाइन सिस्टम में फ़ॉन्ट नियम परिभाषित करें
  • फ़ॉन्ट लोडिंग रणनीति स्थापित करें
  • फॉलबैक फ़ॉन्ट स्टैक कॉन्फ़िगर करें
  • प्रदर्शन निगरानी सेट करें

रखरखाव:

  • फ़ॉन्ट संस्करण प्रबंधन
  • अप्रयुक्त वेट को साफ करें
  • नियमित प्रदर्शन जाँच
  • नए फ़ॉन्ट अपडेट की जाँच करें
    गूगल फ़ॉन्ट्स व्यूअर