Custom Font Families
Integrate Google Fonts or local fonts by defining fontFamily in the config and applying them with font-* utility classes.
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">All lessons in this course
- Adding Custom Colors
- Custom Font Families
- Custom Spacing Values
- Using CSS Variables in Tailwind