Auto Google Font
Typography system generator for web projects using Google Fonts. Searches 1,923 fonts enriched
with typographic personality tags (geometric, humanist, neo-grotesque, etc.), contrast levels,
and body-suitability ratings. Generates complete typographic rhythm systems.
Data Files
data/fonts.csv — 1,923 Google Fonts with: Family, Category, Stroke, Personality, Expressive,
Contrast, Width, Styles, Weight_Range, Variable, Variable_Axes, Body_Suitable, Quality_Tier (A/B/C),
Popularity_Rank, Mood, Best_For, Keywords, Subsets, Google_Fonts_URL, CSS_Importdata/pairings.csv — 73 proven font pairings with contrast type and scale recommendationsdata/scales.csv — 8 modular type scales with sizes, line-heights, letter-spacing, marginsreferences/typographic-rhythm.md — Scale math, line-height tiers, spacing rulesreferences/pairing-principles.md — Contrast theory, decision trees, superfamilies
Modes
MCP note: If the google-fonts MCP server is connected, prefer its tools —
search_fonts, generate_typography_system, lookup_font, list_scales, list_pairings —
over the scripts below. The scripts are the fallback for skill-only installs.
Single Font (Strict)
One font for headings AND body. Must have weight range covering 400+700. Body-suitable required.
python3 scripts/search.py "modern clean SaaS" --mode single
python3 scripts/search.py "geometric professional" --mode single --tier A
Font Pair (Contrast)
Two fonts with typographic contrast. Searches proven pairings first.
python3 scripts/search.py "elegant editorial luxury" --mode pair
python3 scripts/search.py "tech startup bold" --mode pair
Lookup & Scale
python3 scripts/search.py "Inter" --mode lookup # full metadata for a named font
python3 scripts/search.py "marketing bold" --mode scale # search type scales
Full System Output
Generate CSS + Tailwind + embed link from font selection + scale choice.
# Single font
python3 scripts/generate-css.py --font "Inter" --scale major-third --format all
# Font pair
python3 scripts/generate-css.py --heading "Playfair Display" --body "Inter" \
--scale perfect-fourth --format all
# Custom weights and base size
python3 scripts/generate-css.py --heading "Space Grotesk" --body "DM Sans" \
--heading-weights "400;700" --body-weights "300;400;500;700" \
--scale minor-third --base 16 --format css
Workflow
- Understand context — Ask: product type, mood, content density, existing brand
- Search fonts — Run search.py with relevant keywords and mode
- Present top 3 — Show Family, Personality, Contrast, Quality Tier, Weight Range
- Generate system — Run generate-css.py with chosen font(s) and appropriate scale
- Deliver — Provide CSS custom properties, Tailwind config, and embed link
Quick Decision Guide
| Project Type |
Mode |
Scale |
Suggested Search |
| SaaS / Dashboard |
single |
major-second |
"clean professional geometric" |
| Blog / Content |
pair |
major-third |
"editorial readable" |
| Marketing / Landing |
pair |
perfect-fourth |
"bold modern confident" |
| Luxury / Fashion |
pair |
augmented-fourth |
"elegant premium serif" |
| Documentation |
single |
minor-third |
"readable accessible humanist" |
| E-commerce |
pair |
minor-third |
"clean friendly conversion" |
| Portfolio |
pair |
perfect-fourth |
"creative distinctive" |
| Enterprise / Gov |
single |
major-second |
"trustworthy accessible corporate" |
Scale Reference
| Scale |
Ratio |
Best For |
| minor-second |
1.067 |
Dense UI, dashboards |
| major-second |
1.125 |
Apps, admin panels |
| minor-third |
1.2 |
General purpose |
| major-third |
1.25 |
Blogs, content |
| perfect-fourth |
1.333 |
Marketing, editorial |
| augmented-fourth |
1.414 |
Magazines, expressive |
| perfect-fifth |
1.5 |
Display-heavy |
| golden-ratio |
1.618 |
Hero sections |
Pairing Contrast Types
- Structure: Serif + Sans (safest, most contrast)
- Proportion: Geometric sans + Humanist sans (subtle, modern)
- Era: Old-style serif + Neo-grotesque sans (dramatic)
- Weight: Single font family, different weights (simplest)
Quality Rules
- Always use
display=swap in Google Fonts embed
- Prefer variable fonts (fewer HTTP requests, full weight flexibility)
- Never suggest a single-weight font for body text
- Verify Weight_Range covers needed weights before suggesting
- For body text: only suggest Body_Suitable=="Yes" fonts
- Tier A fonts first, then B, then C
- Include
preconnect hints for fonts.googleapis.com and fonts.gstatic.com
- Max 3 font families per project (heading + body + optional mono)
- css2 URLs separate weights with semicolons (
wght@400;700), ranges with .. (wght@100..900);
commas are normalized, while malformed axes and dash ranges are rejected
Output Includes
- CSS custom properties: font families, sizes, line-heights, letter-spacing, measure
- Tailwind config: fontFamily, fontSize with lineHeight and letterSpacing
- Google Fonts
<link> embed with preconnect
- Responsive breakpoint guidance
Showcase Gallery
100 pre-made typography systems applied to fictional projects. Browse at showcase/index.html
or reference showcase/showcase.json for programmatic access.
When a user says "show me examples", "pick a style for me", or "what would work for a SaaS app",
read showcase/showcase.json and filter by project type to suggest a pre-built system.
Regenerating
python3 scripts/generate-showcase.py
For detailed typographic theory, read references/typographic-rhythm.md.
For pairing decision trees, read references/pairing-principles.md.
1---2name: google-fonts3description: Google Fonts typography system generator. Suggests single fonts (strict mode) and font pairs (contrast mode) with complete typographic scales following Tailwind Typography rhythm concepts. Generates CSS custom properties, Tailwind config, and embed links. Trigger: "choose a font", "font pairing", "typography system", "type scale", "Google Font", "heading font", "body font", "web font", "font for my site", "typographic scale", "font suggestion", "which font", "font recommendation", "serif or sans".4---56# Auto Google Font78Typography system generator for web projects using Google Fonts. Searches 1,923 fonts enriched9with typographic personality tags (geometric, humanist, neo-grotesque, etc.), contrast levels,10and body-suitability ratings. Generates complete typographic rhythm systems.1112## Data Files1314- `data/fonts.csv` — 1,923 Google Fonts with: Family, Category, Stroke, Personality, Expressive,15 Contrast, Width, Styles, Weight_Range, Variable, Variable_Axes, Body_Suitable, Quality_Tier (A/B/C),16 Popularity_Rank, Mood, Best_For, Keywords, Subsets, Google_Fonts_URL, CSS_Import17- `data/pairings.csv` — 73 proven font pairings with contrast type and scale recommendations18- `data/scales.csv` — 8 modular type scales with sizes, line-heights, letter-spacing, margins19- `references/typographic-rhythm.md` — Scale math, line-height tiers, spacing rules20- `references/pairing-principles.md` — Contrast theory, decision trees, superfamilies2122## Modes2324**MCP note:** If the `google-fonts` MCP server is connected, prefer its tools —25`search_fonts`, `generate_typography_system`, `lookup_font`, `list_scales`, `list_pairings` —26over the scripts below. The scripts are the fallback for skill-only installs.2728### Single Font (Strict)29One font for headings AND body. Must have weight range covering 400+700. Body-suitable required.3031```bash32python3 scripts/search.py "modern clean SaaS" --mode single33python3 scripts/search.py "geometric professional" --mode single --tier A34```3536### Font Pair (Contrast)37Two fonts with typographic contrast. Searches proven pairings first.3839```bash40python3 scripts/search.py "elegant editorial luxury" --mode pair41python3 scripts/search.py "tech startup bold" --mode pair42```4344### Lookup & Scale4546```bash47python3 scripts/search.py "Inter" --mode lookup # full metadata for a named font48python3 scripts/search.py "marketing bold" --mode scale # search type scales49```5051### Full System Output52Generate CSS + Tailwind + embed link from font selection + scale choice.5354```bash55# Single font56python3 scripts/generate-css.py --font "Inter" --scale major-third --format all5758# Font pair59python3 scripts/generate-css.py --heading "Playfair Display" --body "Inter" \60 --scale perfect-fourth --format all6162# Custom weights and base size63python3 scripts/generate-css.py --heading "Space Grotesk" --body "DM Sans" \64 --heading-weights "400;700" --body-weights "300;400;500;700" \65 --scale minor-third --base 16 --format css66```6768## Workflow69701. **Understand context** — Ask: product type, mood, content density, existing brand712. **Search fonts** — Run search.py with relevant keywords and mode723. **Present top 3** — Show Family, Personality, Contrast, Quality Tier, Weight Range734. **Generate system** — Run generate-css.py with chosen font(s) and appropriate scale745. **Deliver** — Provide CSS custom properties, Tailwind config, and embed link7576## Quick Decision Guide7778| Project Type | Mode | Scale | Suggested Search |79|-------------|------|-------|------------------|80| SaaS / Dashboard | single | major-second | "clean professional geometric" |81| Blog / Content | pair | major-third | "editorial readable" |82| Marketing / Landing | pair | perfect-fourth | "bold modern confident" |83| Luxury / Fashion | pair | augmented-fourth | "elegant premium serif" |84| Documentation | single | minor-third | "readable accessible humanist" |85| E-commerce | pair | minor-third | "clean friendly conversion" |86| Portfolio | pair | perfect-fourth | "creative distinctive" |87| Enterprise / Gov | single | major-second | "trustworthy accessible corporate" |8889## Scale Reference9091| Scale | Ratio | Best For |92|-------|-------|----------|93| minor-second | 1.067 | Dense UI, dashboards |94| major-second | 1.125 | Apps, admin panels |95| minor-third | 1.2 | General purpose |96| major-third | 1.25 | Blogs, content |97| perfect-fourth | 1.333 | Marketing, editorial |98| augmented-fourth | 1.414 | Magazines, expressive |99| perfect-fifth | 1.5 | Display-heavy |100| golden-ratio | 1.618 | Hero sections |101102## Pairing Contrast Types103104- **Structure**: Serif + Sans (safest, most contrast)105- **Proportion**: Geometric sans + Humanist sans (subtle, modern)106- **Era**: Old-style serif + Neo-grotesque sans (dramatic)107- **Weight**: Single font family, different weights (simplest)108109## Quality Rules1101111. Always use `display=swap` in Google Fonts embed1122. Prefer variable fonts (fewer HTTP requests, full weight flexibility)1133. Never suggest a single-weight font for body text1144. Verify Weight_Range covers needed weights before suggesting1155. For body text: only suggest Body_Suitable=="Yes" fonts1166. Tier A fonts first, then B, then C1177. Include `preconnect` hints for fonts.googleapis.com and fonts.gstatic.com1188. Max 3 font families per project (heading + body + optional mono)1199. css2 URLs separate weights with semicolons (`wght@400;700`), ranges with `..` (`wght@100..900`);120 commas are normalized, while malformed axes and dash ranges are rejected121122## Output Includes123124- CSS custom properties: font families, sizes, line-heights, letter-spacing, measure125- Tailwind config: fontFamily, fontSize with lineHeight and letterSpacing126- Google Fonts `<link>` embed with preconnect127- Responsive breakpoint guidance128129## Showcase Gallery130131100 pre-made typography systems applied to fictional projects. Browse at `showcase/index.html`132or reference `showcase/showcase.json` for programmatic access.133134When a user says "show me examples", "pick a style for me", or "what would work for a SaaS app",135read `showcase/showcase.json` and filter by project type to suggest a pre-built system.136137### Regenerating138139```bash140python3 scripts/generate-showcase.py141```142143For detailed typographic theory, read `references/typographic-rhythm.md`.144For pairing decision trees, read `references/pairing-principles.md`.
sliday