Familias de fuentes personalizadas
Integre Google Fonts o fuentes locales definiendo fontFamily en la configuración y aplicándolas con clases de utilidad font-*.
Familias de fuentes personalizadas es una lección gratuita de Tailwind CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Tailwind CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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.
Preguntas frecuentes
¿La lección «Familias de fuentes personalizadas» es gratis?
Sí — el texto completo de «Familias de fuentes personalizadas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Tailwind CSS Academy, actualiza a CoddyKit PRO. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Familias de fuentes personalizadas»?
Integre Google Fonts o fuentes locales definiendo fontFamily en la configuración y aplicándolas con clases de utilidad font-*. Practicas Tailwind CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Tailwind CSS Academy?
No se requiere experiencia previa. Tailwind CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Familias de fuentes personalizadas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Tailwind CSS Academy?
Sí. Cada lección de Tailwind CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Añadir colores personalizados
- Familias de fuentes personalizadas
- Valores de espaciado personalizados
- Uso de variables CSS en Tailwind