Skill ID: OrganizingStyles_49
Description: Choose and apply particular typefaces in your Tailwind configuration.
Where to apply: All text content.
Key Tailwind Classes:
tailwind.config.js
under
theme.extend.fontFamily
.
To use custom fonts, you define them in your
tailwind.config.js
file. You extend the
fontFamily
key within
theme.extend
.
For example, to add a custom sans-serif font like "Inter" and a custom serif font like "Merriweather":
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', /* ...other fallbacks */],
serif: ['Merriweather', 'ui-serif', 'Georgia', /* ...other fallbacks */],
// You can add more custom font families here
// mono: ['JetBrains Mono', 'ui-monospace', /* ... */],
},
},
},
plugins: [],
}
After defining these, you can use classes like
font-sans
or
font-serif
in your HTML, and they will use the first available font in your defined stack (e.g., 'Inter' for
font-sans
).
The example above uses
Inter
and
Georgia
as primary examples (Georgia is web-safe, Inter needs importing). This page itself attempts to load and use 'Inter' via a Google Fonts import in the
<head>
and the Tailwind config script.
Gotcha:
Forgetting to actually import or link the font files in your main CSS file (e.g., with
@import url(...)
for Google Fonts) or your HTML
<head>
. Tailwind can define the font family names, but the browser still needs access to the actual font files to display them.
This text uses the
font-sans
class.
If 'Inter' is configured and loaded, it will be used. Otherwise, it falls back to Tailwind's default sans-serif stack.
This text uses the
font-serif
class.
If 'Georgia' (or another custom serif) is configured, it will be used. Otherwise, it falls back to Tailwind's default serif stack.