google-fonts

Category: Data & AI | Uploader: sliday | Downloads: 0 | Version: v1.0（Latest）

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.

Changelog: Source: GitHub https://github.com/sliday/google-fonts-skill

Directory Structure

Current level: Root

📁 .claude-plugin/
- 📄 marketplace.json 624 B
- 📄 plugin.json 569 B
📁 .github/
- 📁 workflows/
  - 📄 pages.yml 610 B
📁 data/
- 📄 fonts.csv 1.0 MB
- 📄 pairings.csv 44.7 KB
- 📄 scales.csv 2.1 KB
📁 references/
- 📄 pairing-principles.md 3.7 KB
- 📄 typographic-rhythm.md 3.1 KB
📁 scripts/
- 📄 build-pairings.py 4.0 KB
- 📄 core.py 10.8 KB
- 📄 fetch-and-enrich.py 13.1 KB
- 📄 generate-css.py 2.5 KB
- 📄 generate-og-images.py 6.1 KB
- 📄 generate-showcase.py 29.3 KB
- 📄 search.py 2.4 KB
📁 showcase/
- 📁 pages/
  - 📄 aether-analytics.html 8.1 KB
  - 📄 anthem-brands.html 8.1 KB
  - 📄 aperture-design.html 7.9 KB
  - 📄 apex-ventures.html 8.0 KB
  - 📄 archway-platform.html 8.0 KB
  - 📄 atelier-blanc.html 8.1 KB
  - 📄 atheneum-collection.html 8.0 KB
  - 📄 atlas-consulting.html 8.1 KB
  - 📄 basecamp-metrics.html 8.0 KB
  - 📄 beacon-data.html 8.1 KB
  - 📄 blackstone-digital.html 8.0 KB
  - 📄 bloom-wellness.html 8.0 KB
  - 📄 breathe-studio.html 8.1 KB
  - 📄 bright-minds-academy.html 8.2 KB
  - 📄 campfire-workspace.html 8.0 KB
  - 📄 canopy-cloud.html 8.1 KB
  - 📄 cascade-flow.html 8.1 KB
  - 📄 catalyst-group.html 8.1 KB
  - 📄 ch-teau-blanc.html 8.1 KB
  - 📄 chromatic-studio.html 8.1 KB
  - 📄 circuit-logic.html 8.1 KB
  - 📄 clearpath-dashboard.html 8.2 KB
  - 📄 cobalt-scheduler.html 8.1 KB
  - 📄 conduit-ai.html 7.9 KB
  - 📄 contrast-works.html 8.2 KB
  - 📄 copper-market.html 8.0 KB
  - 📄 cornerstone-partners.html 8.2 KB
  - 📄 curiosity-lab.html 8.1 KB
  - 📄 darkroom-portfolio.html 8.1 KB
  - 📄 daybreak-stories.html 8.0 KB
  - 📄 devdocs-hub.html 7.9 KB
  - 📄 drift-insights.html 8.0 KB
  - 📄 ember-vine.html 8.0 KB
  - 📄 folio-works.html 8.0 KB
  - 📄 forge-flame.html 8.1 KB
  - 📄 fulcrum-dashboard.html 8.2 KB
  - 📄 gilt-grace.html 8.1 KB
  - 📄 gradient-metrics.html 8.1 KB
  - 📄 grain-grit.html 8.1 KB
  - 📄 half-light-journal.html 8.2 KB
  - 📄 harness-deploy.html 8.2 KB
  - 📄 helios-admin.html 8.1 KB
  - 📄 helix-pipeline.html 8.0 KB
  - 📄 horizon-marketing.html 8.1 KB
  - 📄 ink-paper.html 8.0 KB
  - 📄 keyframe-studio.html 8.1 KB
  - 📄 keystone-financial.html 8.0 KB
  - 📄 l-essence-studio.html 8.2 KB
  - 📄 lattice-systems.html 8.2 KB
  - 📄 launchpad-agency.html 8.2 KB
  - 📄 lightbox-creative.html 8.0 KB
  - 📄 longform-weekly.html 8.0 KB
  - 📄 maison-aur-lie.html 8.1 KB
  - 📄 margin-notes.html 8.1 KB
  - 📄 marquis-estate.html 8.1 KB
  - 📄 meridian-cloud.html 8.2 KB
  - 📄 mosaic-hub.html 8.0 KB
  - 📄 neon-rift.html 8.0 KB
  - 📄 nimbus-crm.html 8.1 KB
  - 📄 noir-atelier.html 8.0 KB
  - 📄 noise-machine.html 8.1 KB
  - 📄 offset-gallery.html 8.1 KB
  - 📄 onyx-workspace.html 8.1 KB
  - 📄 open-lectures.html 8.0 KB
  - 📄 opulent-living.html 8.1 KB
  - 📄 orbit-control.html 8.0 KB
  - 📄 parallax-studios.html 8.1 KB
  - 📄 penumbra-review.html 8.2 KB
  - 📄 phantom-arcade.html 8.1 KB
  - 📄 pivot-table.html 8.1 KB
  - 📄 prism-insights.html 8.1 KB
  - 📄 pulse-digital.html 8.1 KB
  - 📄 pylon-project-hub.html 8.0 KB
  - 📄 quarry-data.html 8.1 KB
  - 📄 relay-sync.html 7.9 KB
  - 📄 ridgeline-ops.html 8.1 KB
  - 📄 scholar-hub.html 8.1 KB
  - 📄 signal-creative.html 8.1 KB
  - 📄 soleil-maison.html 8.1 KB
  - 📄 spectrum-studio.html 8.0 KB
  - 📄 spire-analytics.html 8.1 KB
  - 📄 still-water-spa.html 7.9 KB
  - 📄 stratus-monitor.html 8.2 KB
  - 📄 studio-k-en.html 8.1 KB
  - 📄 summit-advisory.html 7.9 KB
  - 📄 synapse-ops.html 8.0 KB
  - 📄 the-ivory-room.html 8.1 KB
  - 📄 the-morning-dispatch.html 8.0 KB
  - 📄 the-olive-press.html 8.1 KB
  - 📄 the-quiet-reader.html 8.2 KB
  - 📄 the-serif-post.html 8.2 KB
  - 📄 timber-stack.html 8.0 KB
  - 📄 trellis-board.html 8.0 KB
  - 📄 velvet-gold.html 8.1 KB
  - 📄 verso-magazine.html 8.2 KB
  - 📄 vertex-platform.html 8.0 KB
  - 📄 voxel-storm.html 8.1 KB
  - 📄 waveform-audio.html 8.0 KB
  - 📄 wavelength-co.html 8.1 KB
  - 📄 willow-thread.html 8.1 KB
- 📄 .nojekyll 0 B
- 📄 index.html 46.2 KB
- 📄 llms.txt 12.7 KB
- 📄 robots.txt 88 B
- 📄 showcase.json 34.0 KB
- 📄 sitemap.xml 11.7 KB
📄 .gitignore 40 B
📄 CLAUDE.md 139 B
📄 community-announcement.md 1016 B
📄 README.md 4.7 KB
📄 SKILL.md 5.5 KB

SKILL.md

---
name: google-fonts
description: |
  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".
---

# 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, Personality, Contrast, Width,
  Weight_Range, Variable, Body_Suitable, Quality_Tier (A/B/C), Mood, Best_For, CSS_Import
- `data/pairings.csv` — 73 proven font pairings with contrast type and scale recommendations
- `data/scales.csv` — 8 modular type scales with sizes, line-heights, letter-spacing, margins
- `references/typographic-rhythm.md` — Scale math, line-height tiers, spacing rules
- `references/pairing-principles.md` — Contrast theory, decision trees, superfamilies

## Modes

### Single Font (Strict)
One font for headings AND body. Must have weight range covering 400+700. Body-suitable required.

```bash
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.

```bash
python3 scripts/search.py "elegant editorial luxury" --mode pair
python3 scripts/search.py "tech startup bold" --mode pair
```

### Full System Output
Generate CSS + Tailwind + embed link from font selection + scale choice.

```bash
# 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

1. **Understand context** — Ask: product type, mood, content density, existing brand
2. **Search fonts** — Run search.py with relevant keywords and mode
3. **Present top 3** — Show Family, Personality, Contrast, Quality Tier, Weight Range
4. **Generate system** — Run generate-css.py with chosen font(s) and appropriate scale
5. **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

1. Always use `display=swap` in Google Fonts embed
2. Prefer variable fonts (fewer HTTP requests, full weight flexibility)
3. Never suggest a single-weight font for body text
4. Verify Weight_Range covers needed weights before suggesting
5. For body text: only suggest Body_Suitable=="Yes" fonts
6. Tier A fonts first, then B, then C
7. Include `preconnect` hints for fonts.googleapis.com and fonts.gstatic.com
8. Max 3 font families per project (heading + body + optional mono)

## 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

```bash
python3 scripts/generate-showcase.py
```

For detailed typographic theory, read `references/typographic-rhythm.md`.
For pairing decision trees, read `references/pairing-principles.md`.

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

google-fonts

Directory Structure

SKILL.md

Report

Notice