Custom Font Families in Tailwind Config
Configure custom font family stacks in tailwind.config.js with Google Fonts, system fonts, and fallback chains for sans, serif, and mono utilities.
Fonts
Detailed Explanation
Custom Font Families
Tailwind provides three default font family utilities: font-sans, font-serif, and font-mono. You can customize these or add entirely new ones.
Overriding Default Font Stacks
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
mono: ["JetBrains Mono", "ui-monospace", "monospace"],
},
},
},
};
Adding Custom Font Names
fontFamily: {
display: ["Clash Display", "ui-sans-serif", "sans-serif"],
body: ["Satoshi", "ui-sans-serif", "system-ui", "sans-serif"],
code: ["Fira Code", "ui-monospace", "monospace"],
}
This creates font-display, font-body, and font-code utilities.
Integration with Next.js Font Optimization
When using next/font, combine the CSS variable approach:
// In your layout.tsx
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
// In tailwind.config.js
fontFamily: {
sans: ["var(--font-inter)", "ui-sans-serif", "system-ui"],
}
System Font Stack
A popular fallback stack that works across all platforms:
fontFamily: {
sans: [
"-apple-system", "BlinkMacSystemFont",
"Segoe UI", "Roboto", "Helvetica Neue",
"Arial", "sans-serif",
"Apple Color Emoji", "Segoe UI Emoji",
],
}
This ensures consistent rendering without loading external fonts.
Use Case
Use custom font families when your project uses brand-specific typography from Google Fonts, Adobe Fonts, or local font files.