wtfont is an open-source CLI and MCP tool that identifies the fonts used on any website, cross-references them against the Google Fonts database, and generates copy-paste code for your stack. You can run it from your terminal or let Claude drive it through MCP.

How does wtfont identify fonts on a website?

wtfont parses the site's HTML and CSS statically in roughly one second to extract every font-family declaration along with its role (body, heading, code), source (Google Fonts, Adobe, self-hosted), weights, and license. For JavaScript-rendered single-page apps it optionally falls back to Playwright.

Yes. wtfont is MIT-licensed and published on npm for free. There is no paid tier.

How do I install wtfont?

Install globally with `npm install -g wtfont` (or `bun install -g wtfont` / `pnpm add -g wtfont`), then run `wtfont analyze `. For the Claude / MCP path, add `{"command": "npx", "args": ["-y", "wtfont", "mcp"]}` to your Claude Desktop config.

What's the difference between wtfont's MCP and CLI interfaces?

The CLI is a standalone command you run in your terminal — ideal for scripting, CI, and quick lookups. The MCP server lets Claude (Desktop, Code, Cursor, Windsurf, VS Code) call wtfont's tools conversationally, so you can ask questions like 'what fonts does stripe.com use, and what are free alternatives?' and get an answer with working code.

Does wtfont send my data anywhere?

No. wtfont ships with zero telemetry. The MCP server uses stdio transport only — no HTTP listener, no network port, no cross-process access. Outbound fetches are https-only and guarded against SSRF.

wtfont — identify web fonts from your terminal or through Claude

Why

Inspect. Google. Check if free. Repeat.

That’s the workflow for every font on every site. Inspect the CSS, search the name, verify the license, find a free alternative. wtfont does all of it once and hands back copy-paste code.

Quick start

Two ways to use wtfont.

Pick whichever fits what you’re doing.

Through ClaudeMCP

Add to Claude Desktop config (Settings → Developer → Edit Config):

{
  "mcpServers": {
    "wtfont": {
      "command": "npx",
      "args": ["-y", "wtfont", "mcp"]
    }
  }
}

Restart Claude, then ask: “What fonts does vercel.com use?”

→ Setup for Claude Code, Cursor, Windsurf, VS Code

In terminalCLI

One global install, then run any command:

$ npm install -g wtfont
$ wtfont analyze vercel.com

Also: bun install -g wtfont · pnpm add -g wtfont

→ Full CLI reference

Both paths require Node.js.

See it in action

What asking Claude looks like.

Three real conversations with the MCP interface.

Find free alternatives

You

"What fonts does stripe.com use? Recommend free alternatives."

→ extract_fonts → lookup_google_font → preview_fonts

"Stripe uses Söhne, a commercial geometric sans-serif. Inter is the closest free alternative (humanist proportions, similar x-height). Want me to generate Next.js code?"

Audit a project

You

"Scan this project and tell me which fonts are commercial."

→ scan_project_fonts

"Found 2 fonts: Inter (free) and Proxima Nova (commercial, used in 3 files). Consider replacing Proxima Nova with Plus Jakarta Sans — similar geometric style."

Pair fonts

You

"Inter on body — suggest a heading font and show me side by side."

→ pair_fonts → preview_fonts

"Fraunces pairs well — classic serif/sans contrast. I opened a comparison in your browser. What do you think?"

All queries run locally. No data leaves your machine.

MCP setup

Plug it into your AI assistant.

wtfont runs as a local MCP server. Same JSON config across most clients.

Claude Code

$ claude mcp add --scope user \
    --transport stdio wtfont \
    -- npx -y wtfont mcp

Claude Desktop

Settings → Developer → Edit Config

{
  "mcpServers": {
    "wtfont": {
      "command": "npx",
      "args": ["-y", "wtfont", "mcp"]
    }
  }
}

Cursor

Settings → Tools & Integrations → New MCP Server (same JSON as Desktop)

{
  "mcpServers": {
    "wtfont": {
      "command": "npx",
      "args": ["-y", "wtfont", "mcp"]
    }
  }
}

Windsurf

Edit ~/.codeium/windsurf/mcp_config.json (same JSON as Desktop)

{
  "mcpServers": {
    "wtfont": {
      "command": "npx",
      "args": ["-y", "wtfont", "mcp"]
    }
  }
}

VS Code (Cline)

Command Palette → MCP: Add server → stdio → npx -y wtfont mcp

8 tools available

extract_fonts — detect fonts on a website
lookup_google_font — Google Fonts DB check
list_google_fonts — browse by category
compare_fonts — side-by-side
pair_fonts — heading suggestions
generate_font_code — framework code
preview_fonts — open in browser
scan_project_fonts — audit usage

Hit a config error? Copy the exact message and paste it into Claude — it’ll walk you through the fix.

What it does

Four commands that cover the flow.

From detection to copy-paste code.

analyze

Detect every font on a site

Static parsing in ~1 second. Playwright for SPAs when you need it. Each font shows its role, source, weights, and whether it's free.

wtfont analyze vercel.com

code

Copy-paste code for your stack

Pick a font. Get a snippet for html, nextjs, nuxt, or react — weights, fallback, and import included.

wtfont code Inter --framework nextjs

pair

Heading partners for your body font

Curated Google Fonts candidates with a reason for each. Open a side-by-side compare page in your browser.

wtfont pair Inter

scan

Audit the fonts in your project

Walks your repo and finds every font-family usage. See which are free, which are commercial, and where they live.

wtfont scan

Keyboard shortcuts

wtfont analyze acts as a hub — navigate results and take action without leaving:

Key	Action
j/k or ↑/↓	Move cursor
c	Code view for selected font (copy with c inside)
enter	Lookup view for selected font
p	Open preview in browser
esc	Back to list
q	Quit

The same j/k navigation works in browse, history, and favorites.

JSON output

Pipe into any tool. Great for scripts and CI.

wtfont analyze vercel.com --format json | jq '.fonts[] | select(.isFree == false) | .name'

Themes

Pick a look.

Default is shown throughout this page. Six alternatives below. Switch with wtfont config theme <name>.

Security

Everything runs on your machine.

wtfont only makes network calls to the website you analyze and to fonts.googleapis.com. No telemetry, no remote servers.

stdio only

No HTTP listener, no network port, no cross-process access.

https-only

Refuses plain http://, including at every redirect hop. SSRF guard validates every URL against private and reserved ranges.

✓

Provenance signed

Every release tarball is cryptographically signed via GitHub Actions. Verify with npm audit signatures.

Full security details on GitHub →