Skip to main content
Glama
Sign In
google-fonts-mcp

google-fonts-mcp

by sliday
OverviewSchemaSourceRelated ServersDiscussionsAdmin
Remote

Google Fonts MCP

MCP server and Claude Code skill for typography system generation using Google Fonts. Searches 1,923 enriched fonts, suggests singles or pairs, and generates complete CSS/Tailwind typographic systems.

CleanShot 2026-03-21 at 19 08 00

What It Does

  • Font search with BM25 ranking across personality, mood, and use-case tags

  • Single font mode — one font for heading + body (body-suitable, multi-weight)

  • Pair mode — 73 proven pairings with contrast type classification

  • CSS generation — custom properties, Tailwind config, Google Fonts embed links

  • 8 modular scales — from minor-second (dense UI) to golden-ratio (hero sections)

  • 100-project showcase — browsable gallery of pre-made typography systems

Related MCP server: glyphs-info-mcp

How It Works

  1. Tell Claude what you're building (SaaS, blog, e-commerce...)

  2. Skill searches 1,923 fonts or 73 proven pairings

  3. Pick a font + scale → get CSS custom properties, Tailwind config, and embed link

  4. Ship

Installation

MCP Server (any agent)

uvx google-fonts-mcp

Or install permanently:

pip install google-fonts-mcp

Claude Code

claude mcp add google-fonts -- uvx google-fonts-mcp

Or as a plugin:

claude plugin marketplace add sliday/google-fonts-skill
claude plugin install google-fonts

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "google-fonts": {
      "command": "uvx",
      "args": ["google-fonts-mcp"]
    }
  }
}

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "google-fonts": {
      "command": "uvx",
      "args": ["google-fonts-mcp"]
    }
  }
}

Any MCP Client

{
  "command": "uvx",
  "args": ["google-fonts-mcp"]
}

Usage

The skill activates automatically when you mention fonts, typography, or type scales in Claude Code.

CLI Scripts

# Search for a single body-suitable font
python3 scripts/search.py "modern clean SaaS" --mode single

# Search proven font pairings
python3 scripts/search.py "elegant editorial luxury" --mode pair

# Look up a specific font
python3 scripts/search.py "Inter" --mode lookup

# Search type scales
python3 scripts/search.py "marketing bold" --mode scale

# Generate CSS + Tailwind + embed for a single font
python3 scripts/generate-css.py --font "Inter" --scale major-third --format all

# Generate for a font pair
python3 scripts/generate-css.py --heading "Playfair Display" --body "Inter" \
  --scale perfect-fourth --format all

CleanShot 2026-03-21 at 19 08 08

Data

File

Records

Description

data/fonts.csv

1,923

Google Fonts with personality, contrast, body-suitability, quality tier

data/pairings.csv

73

Proven pairings with contrast type and scale recommendations

data/scales.csv

8

Modular type scales with sizes, line-heights, letter-spacing

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

Showcase Gallery

Browse 100 Typography Systems →

100 pre-made typography systems applied to fictional projects — SaaS dashboards, editorial blogs, luxury brands, gaming sites, and more. Each page renders live with actual Google Fonts.

Regenerate with:

python3 scripts/generate-showcase.py

MCP Tools

Tool

Description

search_fonts

Search fonts by mood/use-case. Modes: single, pair, scale

generate_typography_system

Full CSS + Tailwind + embed from font + scale

lookup_font

Get full metadata for a specific font

list_scales

All 8 typographic scales

list_pairings

All 73 proven pairings (filterable by contrast type)

Project Structure

├── src/google_fonts_mcp/             # MCP server (PyPI package)
│   ├── server.py                     # FastMCP server with 5 tools
│   ├── core.py                       # Search engine + CSS generation
│   └── data/                         # Bundled font data
├── SKILL.md                          # Claude Code skill definition
├── data/                             # Canonical font data (CSV)
├── scripts/                          # CLI tools + generators
├── showcase/                         # 100-project gallery + SEO
│   ├── llms-full.txt                 # Agent-readable full reference
│   └── pages/                        # Individual HTML previews
├── tests/                            # pytest suite
└── registry/                         # MCP registry submission files

Development

uv sync          # install deps incl. pytest (dev group)
uv run pytest -q # run the test suite

Weight strings follow the css2 API: semicolons between discrete weights (400;700), .. for variable ranges (100..900). Comma input is auto-normalized; invalid axis specifications are rejected before generating code.

License

MIT

Available Tools

5 tools
generate_typography_systemA

Generate a complete typography system from font selection + scale.

Returns CSS custom properties, Tailwind config, and/or Google Fonts embed HTML. Format: css, tailwind, embed, or all. Weights: semicolon-separated per the css2 API (e.g. "400;700"); variable ranges use ".." (e.g. "100..900"). Legacy comma input is auto-converted.

Inputs: heading (required), base, body, scale, +3 more. Returns: object

list_pairingsA

Return all 73 proven font pairings. Optionally filter by contrast type (Structure, Proportion, Era, Weight).

Inputs: category. Returns: result

list_scalesA

Return all 8 typographic scales with ratios and use-case recommendations.

Inputs: no named parameters. Returns: result

lookup_fontA

Look up a specific Google Font by exact name. Returns full metadata.

Inputs: name (required). Returns: result

search_fontsA

Search Google Fonts by description, mood, or use case.

Modes:

  • single: Body-suitable fonts for heading + body (default)

  • pair: Proven font pairings with contrast type

  • scale: Typographic scales by use case

Tier filter (A/B/C) applies to single mode only.

Inputs: query (required), mode, tier, max_results. Returns: result

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    Deploy Server
    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    TDQS

    A4.2/5.0

    Scored across 5 tools

    Disambiguation4/5

    Most tools have clearly distinct purposes: searching, looking up a font, generating a system, and listing scales/pairings. However, search_fonts has 'pair' and 'scale' modes that overlap conceptually with list_pairings and list_scales, which could cause an agent to pick the wrong tool.

    Naming Consistency5/5

    All tool names follow a consistent verb_noun pattern: search_fonts, lookup_font, list_scales, list_pairings, generate_typography_system. The naming is predictable and easy to infer.

    Tool Count5/5

    Five tools is well-scoped for a Google Fonts typography server. Each tool covers a distinct need: discovery, lookup, scales, pairings, and system generation, without unnecessary bloat.

    Completeness5/5

    The tool surface covers the full typography workflow: finding fonts, looking up font details, retrieving scales and pairings, and generating typography system output. No major gaps are apparent for the server's stated purpose.

    Maintenance

    ActivityStale
    ResponsivenessLimited data

    Resources

    Related MCP Connectors

    Related MCP Servers