mcpField
G
google-fonts-skill

google-fonts-skill

github.com/podoDesign & UI29165 installsUpdated 1d ago
Repository

About google-fonts-skill

google-fonts-skill helps designers select Google Fonts and build typography directions, with metadata for 1,923 fonts, pairing suggestions, and ready-to-use design snippets. It can be installed as a Claude plugin or used with the google-fonts MCP server.

Key features

  1. 01Font selection using mood metadata
  2. 0273 font pairing suggestions
  3. 03CSS properties and Tailwind snippets
  4. 048 modular type scales
  5. 05100 typography showcases

Use cases

  1. 01Choosing fonts for a design
  2. 02Finding font pairings
  3. 03Generating typography CSS or Tailwind configuration
  4. 04Exploring type scale and showcase options

MCP support

Can be used with the google-fonts MCP server, installed using `claude mcp add google-fonts -- uvx google-fonts-mcp`. The skill also offers a Claude plugin installation path.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill google-fonts-skill

After installing, type/google-fonts-skillin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

google-fonts-skill

Catalogue stub — full platform skill: sliday/google-fonts-skill

Decision tree

  1. Is the skill already active? Check if the google-fonts MCP server is connected or the plugin is installed.

    • Yes → proceed directly
    • No → go to step 2

  2. Which install method fits your environment?

    • MCP server → install with uvx (see below)
    • Claude plugin → install with claude plugin install (see below)
    • If unsure → show both options to the user

Install methods

Option A — MCP server
claude mcp add google-fonts -- uvx google-fonts-mcp
Option B — Claude plugin
claude plugin install google-fonts

Note: Requires Python/uvx for the MCP path. See the GitHub README for full setup instructions.

Invoke after install

  • Skill name: google-fonts-skill
  • MCP server name: google-fonts
  • Triggers: "Google Fonts", "font pairing", "modular scale", "typography showcase"

What it does

Provides intelligent Google Fonts selection across 1,923 fonts enriched with personality and mood metadata. Suggests from 73 battle-tested pairing combinations, generates ready-to-use CSS custom properties, Tailwind configuration snippets, and Google Fonts embed links. Offers 8 modular type scales and 100 pre-built typography showcases for instant design direction.

When NOT to use

  • Non-Google font sources (self-hosted, Adobe Fonts, etc.)
  • Complete brand typography system needing token architecture — pair with design-tokens-skill
  • Variable font fine-tuning at axis level — consult font-specific documentation

Comments

Markdown supported