Tailwind Font Config Generator
Pick a sans, serif and mono. Get the Tailwind v3 config, the v4 @theme block, and the matching Google Fonts <link> tag.
Runs entirely in your browser — no upload, no registration.
Tailwind v3 config
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
serif: ['Fraunces', 'Georgia', 'serif'],
mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
},
},
},
};Tailwind v4 @theme (recommended)
/* src/styles.css (Tailwind v4) */
@import "tailwindcss";
@theme {
--font-sans: 'Inter', system-ui, sans-serif;
--font-serif: 'Fraunces', Georgia, serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
}Google Fonts <link>
<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&family=Fraunces:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">What this tool does
Emits Tailwind theme configuration for both v3 (tailwind.config.js fontFamily) and v4 (styles.css @theme --font-*) plus the required Google Fonts embed.
Why you might need it
A wrong fontFamily key breaks font-* utilities silently. Generate it correctly the first time.
How to use it
- Pick your three fonts.
- Copy the appropriate snippet for your Tailwind version.
- Paste the Google Fonts <link> into your <head>.
Always review the included licence before commercial use. Do not remove copyright records, designer names, licensing metadata or embedding restrictions from any font you process.