カスタムフォントファミリー
設定ファイルでfontFamilyを定義してGoogle Fontsやローカルフォントを組み込み、font-*ユーティリティクラスで適用します。
「カスタムフォントファミリー」はCoddyKit上の無料Tailwind CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTailwind CSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Tailwind CSS Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Tailwind's Default Font Stacks
Tailwind provides three default font family utilities: font-sans, font-serif, and font-mono. Each maps to a carefully chosen system font stack that looks good across all operating systems without requiring any font downloads. For most projects, you will want to replace or augment these with a branded web font that gives your project a distinctive 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>Choosing a Google Font
Google Fonts is the most common source of free web fonts. Browse fonts.google.com and select a font that fits your brand. Popular choices for UI projects include Inter for clean modern interfaces, Geist for technical products, Playfair Display for editorial elegance, and JetBrains Mono for code editors. Choose the weights you actually use (regular 400 and semibold 600 cover most cases).
<!-- 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">Registering Fonts in Tailwind Config
After loading the font via a <link> tag or CSS @import, register it in tailwind.config.js under theme.extend.fontFamily. Provide the font name exactly as it appears in Google Fonts (with spaces if applicable) as the first item in a stack array. Always include fallback fonts — system fonts as backup in case the web font fails to load.
// 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'],
},
},
},
};Applying Font Families in HTML
Once registered, use the font-{key} utility class to apply the font. If you extended sans, then font-sans now resolves to your chosen font. If you added a new key like display, the utility class is font-display. Apply the font family at the highest ancestor level to inherit it everywhere, then override specific sections as needed.
<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>Replacing the Default Font Family
To make your chosen font the default everywhere without adding font-sans to every element, override theme.fontFamily.sans (outside extend) to replace the default stack entirely. Then apply font-sans once on your body element, and all text that inherits from body will use your custom font without any additional class names.
// 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>Loading Fonts with Next.js Font Optimization
In Next.js projects, use the next/font module instead of Google Fonts CDN links. It downloads fonts at build time, serves them from your own domain, eliminates external requests, and prevents layout shift with automatic font size adjustments. Generate the CSS variable name and pass it to your Tailwind config using that variable, creating a tight integration between Next.js font optimization and 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'],
},
},
}Using Local Font Files
When using purchased or custom fonts, host them locally and define them with a CSS @font-face rule. Place font files in your public directory and reference them with absolute paths. Use font-display: swap to show fallback fonts immediately while the custom font loads, preventing invisible text during load. Then register the font family in your Tailwind config as usual.
/* 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
After setting the font family, control weight with Tailwind's font-{weight} utilities. Common weights include font-normal (400), font-medium (500), font-semibold (600), and font-bold (700). Make sure you load the specific weights from Google Fonts that you intend to use — requesting a weight that is not loaded causes the browser to synthesize it, resulting in poor-quality 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 contain all weights (and sometimes widths and italics) in a single file, reducing HTTP requests while supporting the full weight range. Load a variable font once and use any Tailwind font-weight utility without worrying about whether that specific weight was requested. Many modern Google Fonts now offer variable versions — look for the ital,wght@ axis syntax in the URL.
<!-- 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 provides antialiased and subpixel-antialiased utilities that control how fonts are rendered on screen. Apply antialiased globally on your body to enable grayscale antialiasing, which makes modern web fonts look crisper and thinner on high-DPI displays. Most Tailwind projects add antialiased as a base style alongside the font family declaration.
<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>Testing Font Loading
Verify your custom fonts load correctly by opening Chrome DevTools, going to the Network tab, and filtering by Font. You should see your font files listed. In the Elements panel, select a text node and check the Computed tab — the font-family property should show your custom font name as the resolved font, not the fallback. Test at multiple viewport sizes and connection speeds to catch loading issues.
Quick Check
Test your understanding of custom font families in Tailwind CSS.
Lesson Recap
In this lesson you learned: register custom fonts in theme.extend.fontFamily as an array with fallback fonts, load Google Fonts via a CDN <link> tag or use next/font for optimized loading in Next.js, and apply antialiased globally for crisp font rendering. Next up we add custom spacing values to fill gaps in Tailwind's default scale.
よくある質問
「カスタムフォントファミリー」レッスンは無料ですか？
はい。「カスタムフォントファミリー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。
「カスタムフォントファミリー」で何を学びますか？
設定ファイルでfontFamilyを定義してGoogle Fontsやローカルフォントを組み込み、font-*ユーティリティクラスで適用します。 ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Tailwind CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTailwind CSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「カスタムフォントファミリー」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTailwind CSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのTailwind CSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- カスタムカラーの追加
- カスタムフォントファミリー
- カスタムスペース値
- TailwindでのCSS変数の利用