📘 Lesson  ·  Lesson 11

Using Google Fonts

Google Fonts इस्तेमाल

Why Google Fonts

In the fonts chapter you learned that font-family only works if the font is installed on the visitor's device — which limits you to a handful of "web-safe" fonts like Arial. Google Fonts solves this completely. It's a free library of 1,500+ beautiful fonts that load FROM Google's servers, so every visitor sees the exact font you chose — no installation needed. It's free, fast, and used by millions of websites. This is how real sites get their distinctive, professional typography.

Step 1: Pick a Font at fonts.google.com

1. Go to  fonts.google.com
2. Browse or search (try "Poppins", "Roboto", "Inter", "Lato")
3. Click a font you like
4. Select the weights you need (e.g. 400 Regular, 700 Bold)
5. Google gives you the code to copy

Browse the library, preview fonts with your own text, and pick one. Tip: only select the weights you'll actually use — each weight is extra data to download, so choosing 2-3 weights keeps your site fast. Popular, reliable choices for beginners: Poppins and Inter (modern sans-serif), Roboto and Lato (clean, versatile), Merriweather (elegant serif).

METHOD A - in HTML <head> (recommended, faster):
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
          rel="stylesheet">
</head>

METHOD B - in your CSS file with @import:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
The <link> method (A) is recommended — it loads faster than @import because the browser can fetch the font in parallel while reading the page. Google gives you this exact code; you just paste it. Notice wght@400;700 requests the two weights you selected, and display=swap tells the browser to show fallback text immediately while the font loads (so text is never invisible). Both methods work — but use <link> in <head> for best performance.

Step 3: Apply It with font-family

/* After linking, just use it like any font: */
body {
    font-family: 'Poppins', sans-serif;
}
h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}
Your whole page now displays in Poppins - a clean, modern look that every visitor sees identically, on any device.

Once linked, the Google Font behaves like any other font-family value. Keep the generic fallback (sans-serif) at the end — so if Google's servers ever hiccup, readable text still shows. That's the entire process: pick, link, apply. Three steps and your site has professional typography.

Font Pairing Tips

  • One or two fonts, max: more than two looks messy. A common pro pattern: one font for headings, one for body.
  • Contrast, not clash: pair a serif heading with a sans-serif body (or vice versa) for elegant contrast. Two similar sans-serifs often just look like a mistake.
  • Safe starter pairs: Poppins (headings) + Inter (body); Merriweather (headings) + Roboto (body); or simply ONE versatile family like Inter for everything at different weights.
  • Readability first: a fancy display font is fine for a big heading, never for paragraphs of body text.

Exam Corner

Q: What problem do Google Fonts solve? They let every visitor see your chosen font without it being installed on their device.

Q: Two ways to include a Google Font? A <link> tag in <head>, or @import in CSS. Link is faster/recommended.

Q: Why select fewer weights? Each weight is extra data to download; fewer weights = faster site.

Q: What does display=swap do? Shows fallback text immediately while the font loads, so text is never invisible.

Q: After linking, how do you use the font? With font-family, keeping a generic fallback: font-family: 'Poppins', sans-serif;

Google Fonts क्यों

Fonts chapter में आपने सीखा font-family तभी चलता है जब font visitor के device पर installed हो — जो आपको Arial जैसे कुछ ही "web-safe" fonts तक सीमित करता है. Google Fonts इसे पूरी तरह हल करता है. यह 1,500+ खूबसूरत fonts की free library है जो Google के servers से load होते हैं, तो हर visitor ठीक वही font देखता है जो आपने चुना — कोई installation नहीं. यह free, तेज़, और लाखों websites इस्तेमाल करती हैं. असली sites ऐसे ही अपनी विशिष्ट, professional typography पाती हैं.

Step 1: fonts.google.com पर Font चुनिए

1. fonts.google.com par jaiye
2. Browse ya search kariye ("Poppins", "Roboto", "Inter", "Lato" try karein)
3. Pasand font par click kariye
4. Zaroori weights chuniye (jaise 400 Regular, 700 Bold)
5. Google aapko copy karne ka code deta hai

Library browse कीजिए, अपने text से fonts preview कीजिए, और एक चुनिए. Tip: सिर्फ वही weights select कीजिए जो असल में use करेंगे — हर weight extra data download है, तो 2-3 weights चुनना site तेज़ रखता है. Beginners के लिए popular, भरोसेमंद choices: Poppins और Inter (modern sans-serif), Roboto और Lato (साफ, versatile), Merriweather (elegant serif).

METHOD A - HTML <head> me (recommended, tez):
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
          rel="stylesheet">
</head>

METHOD B - CSS file me @import se:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
<link> method (A) recommended है — यह @import से तेज़ load होता है क्योंकि browser page पढ़ते समय font को parallel में fetch कर सकता है. Google आपको यही exact code देता है; आप बस paste करते हैं. ध्यान दीजिए wght@400;700 आपके चुने दो weights मांगता है, और display=swap browser को कहता है font load होते समय fallback text तुरंत दिखाए (ताकि text कभी invisible न हो). दोनों methods चलते हैं — पर best performance के लिए <head> में <link> use कीजिए.

Step 3: font-family से लगाइए

/* Link karne ke baad, kisi bhi font ki tarah use karein: */
body {
    font-family: 'Poppins', sans-serif;
}
h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}
Aapka poora page ab Poppins me dikhta hai - saaf, modern look jo har visitor ek jaisa dekhta hai, kisi bhi device par.

Link होने के बाद Google Font किसी और font-family value जैसा व्यवहार करता है. Generic fallback (sans-serif) आखिर में रखिए — ताकि Google के servers कभी अटकें तो पढ़ने लायक text फिर भी दिखे. यही पूरी प्रक्रिया है: pick, link, apply. तीन steps और आपकी site में professional typography.

Font Pairing Tips

  • एक या दो fonts, ज़्यादा नहीं: दो से ज़्यादा गड़बड़ दिखता है. Common pro pattern: headings के लिए एक font, body के लिए एक.
  • Contrast, टकराव नहीं: serif heading को sans-serif body के साथ जोड़िए (या उल्टा) elegant contrast के लिए. दो मिलती-जुलती sans-serifs अक्सर गलती जैसी दिखती हैं.
  • Safe starter pairs: Poppins (headings) + Inter (body); Merriweather (headings) + Roboto (body); या बस Inter जैसी एक versatile family हर चीज़ के लिए अलग weights पर.
  • Readability पहले: fancy display font बड़ी heading के लिए ठीक, body text के paragraphs के लिए कभी नहीं.

Exam Corner

Q: Google Fonts कौन-सी problem हल करते हैं? हर visitor आपका चुना font device पर installed हुए बिना देखता है.

Q: Google Font जोड़ने के दो तरीके? <head> में <link> tag, या CSS में @import. Link तेज़/recommended.

Q: कम weights क्यों select करें? हर weight extra data download है; कम weights = तेज़ site.

Q: display=swap क्या करता है? Font load होते समय fallback text तुरंत दिखाता है, ताकि text कभी invisible न हो.

Q: Link के बाद font कैसे use करते हैं? font-family से, generic fallback रखते हुए: font-family: 'Poppins', sans-serif;
← Back to CSS Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.