PricingLoginStart free
Tailwind CSS Academy · पाठ

कस्टम फ़ॉन्ट परिवार

कॉन्फ़िगरेशन में fontFamily परिभाषित करके Google Fonts या स्थानीय फ़ॉन्ट एकीकृत करें और font-* यूटिलिटी वर्गों से उन्हें लागू करें।

पाठ 2, कुल 4 में से13 चरण

कस्टम फ़ॉन्ट परिवार, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Tailwind के डिफ़ॉल्ट फ़ॉन्ट स्टैक

Tailwind तीन डिफ़ॉल्ट font family utilities प्रदान करता है: font-sans, font-serif और font-mono। प्रत्येक utility सावधानी से चुने गए system font stack से जुड़ी है, जो किसी भी font download की आवश्यकता के बिना सभी operating systems पर अच्छी दिखाई देती है। अधिकांश projects में आप इन fonts को किसी branded web font से बदलना या इनके साथ जोड़ना चाहेंगे, जो आपके project को एक विशिष्ट typographic identity देता है।

/* Tailwind's built-in font stacks */
font-sans  → ui-sans-serif, system-ui, -apple-system, ...
font-serif → ui-serif, Georgia, Cambria, ...
font-mono  → ui-monospace, SFMono-Regular, Menlo, ...

<!-- Using them -->
<p class="font-sans">System sans-serif text</p>
<p class="font-serif">Elegant serif text</p>
<pre class="font-mono">code example</pre>

Google Font चुनना

Google Fonts निःशुल्क web fonts का सबसे सामान्य स्रोत है। fonts.google.com देखें और अपने brand के अनुरूप font चुनें। UI projects के लिए लोकप्रिय विकल्पों में साफ़-सुथरे आधुनिक interfaces के लिए Inter, तकनीकी products के लिए Geist, संपादकीय गरिमा के लिए Playfair Display, और code editors के लिए JetBrains Mono शामिल हैं। केवल वही weights चुनें जिनका आप वास्तव में उपयोग करते हैं (अधिकांश मामलों के लिए regular 400 और semibold 600 पर्याप्त होते हैं)।

<!-- Add to your HTML <head> to load from Google Fonts -->
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Or for Playfair Display -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">

Tailwind Config में Fonts पंजीकृत करना

Font को <link> tag या CSS @import के माध्यम से load करने के बाद, उसे tailwind.config.js में theme.extend.fontFamily के अंतर्गत पंजीकृत करें। Google Fonts में font का नाम जैसा दिखाई देता है, ठीक वैसा ही दें (जहाँ आवश्यक हो, spaces सहित) और उसे stack array का पहला item रखें। हमेशा fallback fonts शामिल करें — web font load न होने की स्थिति में backup के रूप में system fonts।

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        display: ['Playfair Display', 'Georgia', 'serif'],
        mono: ['JetBrains Mono', 'ui-monospace', 'SFMono-Regular', 'monospace'],
      },
    },
  },
};

HTML में Font Families लागू करना

पंजीकरण के बाद, font लागू करने के लिए font-{key} utility class का उपयोग करें। यदि आपने sans को extend किया है, तो font-sans अब आपके चुने हुए font पर resolve होगा। यदि आपने display जैसी नई key जोड़ी है, तो utility class font-display होगी। Font family को सबसे ऊपरी ancestor स्तर पर लागू करें, ताकि वह हर जगह inherit हो सके; फिर आवश्यकता के अनुसार विशिष्ट sections में उसे override करें।

<body class="font-sans">
  <!-- All text inherits Inter font -->

  <h1 class="font-display text-5xl font-bold">
    Playfair Display Heading
  </h1>

  <p class="font-sans text-gray-600">
    Regular body text in Inter
  </p>

  <pre class="font-mono text-sm bg-gray-100 p-4 rounded">
    code in JetBrains Mono
  </pre>
</body>

डिफ़ॉल्ट Font Family बदलना

हर element में font-sans जोड़े बिना अपने चुने हुए font को हर जगह डिफ़ॉल्ट बनाने के लिए, theme.fontFamily.sans को (extend के बाहर) override करके डिफ़ॉल्ट stack को पूरी तरह बदल दें। फिर अपने body element पर एक बार font-sans लागू करें। इसके बाद body से inherit होने वाला सारा text बिना किसी अतिरिक्त class name के आपके custom font का उपयोग करेगा।

// tailwind.config.js — Override default sans (replaces the default)
module.exports = {
  theme: {
    fontFamily: {
      sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
      // serif and mono keep defaults unless also overridden
    },
  },
};

<!-- Now font-sans = Inter everywhere -->
<body class="font-sans">
  <p>This text automatically uses Inter</p>
</body>

Next.js Font Optimization के साथ Fonts Load करना

Next.js projects में Google Fonts CDN links के बजाय next/font module का उपयोग करें। यह build के समय fonts download करता है, उन्हें आपके अपने domain से serve करता है, बाहरी requests समाप्त करता है और automatic font size adjustments के माध्यम से layout shift रोकता है। CSS variable name generate करें और उस variable का उपयोग करके उसे अपने Tailwind config में पास करें। इससे Next.js font optimization और Tailwind के बीच घनिष्ठ एकीकरण बनता है।

// app/layout.tsx
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={inter.variable}>
      <body className="font-sans">{children}</body>
    </html>
  );
}

// tailwind.config.js
theme: {
  extend: {
    fontFamily: {
      sans: ['var(--font-inter)', 'ui-sans-serif', 'system-ui'],
    },
  },
}

स्थानीय Font Files का उपयोग करना

खरीदे हुए या custom fonts का उपयोग करते समय, उन्हें स्थानीय रूप से host करें और CSS @font-face rule के साथ परिभाषित करें। Font files को अपने public directory में रखें और absolute paths से उनका reference दें। Custom font load होने तक fallback fonts तुरंत दिखाने के लिए font-display: swap का उपयोग करें, जिससे load के दौरान अदृश्य text दिखाई देने से रोका जा सके। फिर font family को सामान्य तरीके से अपने Tailwind config में पंजीकृत करें।

/* In your global CSS */
@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/BrandFont-Regular.woff2') format('woff2'),
       url('/fonts/BrandFont-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* tailwind.config.js */
theme: {
  extend: {
    fontFamily: {
      brand: ['BrandFont', 'sans-serif'],
    },
  },
}

Font Weight Utilities

Font family सेट करने के बाद, Tailwind की font-{weight} utilities से weight नियंत्रित करें। सामान्य weights में font-normal (400), font-medium (500), font-semibold (600) और font-bold (700) शामिल हैं। Google Fonts से उन specific weights को load करना सुनिश्चित करें जिनका आप उपयोग करना चाहते हैं — load न किए गए weight का अनुरोध करने पर browser उसे स्वयं synthesize करता है, जिससे text की गुणवत्ता खराब हो जाती है।

<!-- Load weights 400, 600, 700 from Google -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<!-- Use them with Tailwind weight utilities -->
<p class="font-sans font-normal">Regular body text (400)</p>
<p class="font-sans font-semibold">Semibold text (600)</p>
<h1 class="font-sans font-bold">Bold heading (700)</h1>

Variable Fonts

Variable fonts में सभी weights (और कभी-कभी widths और italics भी) एक ही file में होते हैं। इससे HTTP requests कम होती हैं और साथ ही पूरी weight range का समर्थन मिलता है। किसी variable font को एक बार load करें और यह चिंता किए बिना कोई भी Tailwind font-weight utility उपयोग करें कि वह specific weight request की गई थी या नहीं। कई आधुनिक Google Fonts अब variable versions प्रदान करते हैं — URL में ital,wght@ axis syntax देखें।

<!-- Variable font: loads once, supports all weights 100-900 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">

<!-- Now ALL weight utilities work with Inter -->
<p class="font-thin">font-thin (100)</p>
<p class="font-normal">font-normal (400)</p>
<p class="font-bold">font-bold (700)</p>
<p class="font-black">font-black (900)</p>

Font Smoothing Utilities

Tailwind antialiased और subpixel-antialiased utilities प्रदान करता है, जो यह नियंत्रित करती हैं कि fonts screen पर कैसे render हों। Grayscale antialiasing सक्षम करने के लिए अपने body पर globally antialiased लागू करें। इससे high-DPI displays पर आधुनिक web fonts अधिक स्पष्ट और पतले दिखाई देते हैं। अधिकांश Tailwind projects font family declaration के साथ base style के रूप में antialiased जोड़ते हैं।

<body class="font-sans antialiased text-gray-900">
  <!-- Text renders with smooth antialiasing across the page -->

  <h1 class="font-bold text-4xl tracking-tight">
    Crisp, antialiased heading
  </h1>
</body>

Font Loading का परीक्षण

Chrome DevTools खोलकर, Network tab पर जाकर और Font से filter करके जाँचें कि आपके custom fonts सही ढंग से load हो रहे हैं। आपकी font files सूची में दिखाई देनी चाहिए। Elements panel में कोई text node चुनें और Computed tab जाँचें — font-family property में fallback के बजाय resolved font के रूप में आपके custom font का नाम दिखाई देना चाहिए। Loading की समस्याएँ पकड़ने के लिए कई viewport sizes और connection speeds पर परीक्षण करें।

त्वरित जाँच

Tailwind CSS में custom font families की अपनी समझ का परीक्षण करें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पाठ का पुनरावलोकन

इस पाठ में आपने सीखा: fallback fonts वाले array के रूप में theme.extend.fontFamily में custom fonts पंजीकृत करना, CDN <link> tag के माध्यम से Google Fonts load करना या Next.js में optimized loading के लिए next/font का उपयोग करना, और स्पष्ट font rendering के लिए globally antialiased लागू करना। अगले पाठ में हम Tailwind के डिफ़ॉल्ट scale में छूटे हुए अंतर भरने के लिए custom spacing values जोड़ेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
30
पाठ
120
निःशुल्क सीखना शुरू करेंपूरा पाठ्यक्रम देखें

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

क्या “कस्टम फ़ॉन्ट परिवार” पाठ निःशुल्क है?

हाँ—“कस्टम फ़ॉन्ट परिवार” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“कस्टम फ़ॉन्ट परिवार” में मैं क्या सीखूँगा?

कॉन्फ़िगरेशन में fontFamily परिभाषित करके Google Fonts या स्थानीय फ़ॉन्ट एकीकृत करें और font-* यूटिलिटी वर्गों से उन्हें लागू करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“कस्टम फ़ॉन्ट परिवार” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. कस्टम रंग जोड़ना
  2. कस्टम फ़ॉन्ट परिवार
  3. कस्टम स्पेसिंग मान
  4. Tailwind में CSS चर का उपयोग
← Tailwind CSS Academy पर वापस जाएँ