google-fonts-mcp
This server provides Google Fonts typography tools for searching fonts, generating CSS/Tailwind systems, and exploring proven pairings and scales.
search_fonts: Search fonts by mood/use-case in single font, pair, or scale modes, with optional quality tier filtering and result limits.
generate_typography_system: Generate complete typography systems from heading/body font selections, including CSS custom properties, Tailwind config, and Google Fonts embed HTML.
lookup_font: Look up full metadata for a specific Google Font by exact name.
list_scales: List all 8 modular type scales with ratios and use-case recommendations.
list_pairings: List all 73 proven font pairings, optionally filtered by contrast type (Structure, Proportion, Era, Weight).
Provides font search, pairings, and typography system generation using Google Fonts.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@google-fonts-mcpsearch for a clean modern font pair for a tech blog"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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.
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
Tell Claude what you're building (SaaS, blog, e-commerce...)
Skill searches 1,923 fonts or 73 proven pairings
Pick a font + scale → get CSS custom properties, Tailwind config, and embed link
Ship
Installation
MCP Server (any agent)
uvx google-fonts-mcpOr install permanently:
pip install google-fonts-mcpClaude Code
claude mcp add google-fonts -- uvx google-fonts-mcpOr as a plugin:
claude plugin marketplace add sliday/google-fonts-skill
claude plugin install google-fontsCursor
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 allData
File | Records | Description |
| 1,923 | Google Fonts with personality, contrast, body-suitability, quality tier |
| 73 | Proven pairings with contrast type and scale recommendations |
| 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.pyMCP Tools
Tool | Description |
| Search fonts by mood/use-case. Modes: single, pair, scale |
| Full CSS + Tailwind + embed from font + scale |
| Get full metadata for a specific font |
| All 8 typographic scales |
| 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 filesDevelopment
uv sync # install deps incl. pytest (dev group)
uv run pytest -q # run the test suiteWeight 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 toolsgenerate_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.
| Name | Required | Description | Default |
|---|---|---|---|
| base | No | ||
| body | No | ||
| scale | No | major-third | |
| format | No | all | |
| heading | Yes | ||
| body_weights | No | 300;400;500;600;700 | |
| heading_weights | No | 400;700 |
Output Schema
| Name | Required | Description |
|---|---|---|
No output parameters | ||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full behavioral burden, and it does substantial work: it discloses the output artifacts, the format selection semantics, the weights syntax per the css2 API, variable-range '..' notation, and legacy comma auto-conversion. The gap is that it does not cover failure modes (e.g., unknown fonts or invalid scale values) or dependencies, though an output schema exists to document return shape. This is solid but not exhaustive.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Four tight sentences, front-loaded with the core purpose and output artifacts before diving into syntax details. There is no fluff or repetition; every sentence adds operational information (deliverables, format values, weight syntax, legacy handling).
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Reasonably complete for a tool that has an output schema covering returns: it details formats and weight conventions. But it leaves the 'scale' parameter under-specified — its allowed values presumably come from list_scales, yet no cross-reference is given — and the meaning of body=null and base is not explained. An agent could plausibly pass an invalid scale string. These gaps are notable given 0% schema coverage.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0% across 7 parameters, so the description must compensate — and it only partially does. It adds genuine meaning for 'format' (enumerating css/tailwind/embed/all) and weight syntax (semicolon-separated, '..' ranges, comma auto-conversion), but leaves 'scale' (only a default, 'major-third', with no enumerated options), 'base', and 'body' (null default meaning unspecified) unexplained. It clarifies about a third of the parameters, which is better than nothing but insufficient for the coverage gap.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
'Generate a complete typography system from font selection + scale' states a specific verb, resource, and inputs, and names the deliverable (CSS custom properties, Tailwind config, Google Fonts embed HTML). It is unmistakably distinct from the sibling lookup utilities (search_fonts, lookup_font, list_scales, list_pairings), which all retrieve information rather than produce an artifact.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies its position in the workflow — generation after font selection — and enumerates the format dimension (css/tailwind/embed/all), signaling it is the synthesis step rather than a discovery step. However, it never explicitly names siblings or states when to choose this tool over them, nor does it give exclusions or prerequisites (e.g., whether fonts must first come from search_fonts).
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_pairingsA
Return all 73 proven font pairings. Optionally filter by contrast type (Structure, Proportion, Era, Weight).
| Name | Required | Description | Default |
|---|---|---|---|
| category | No |
Output Schema
| Name | Required | Description |
|---|---|---|
| result | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It implies a read-only operation (returning data) but does not disclose authentication needs, error behavior, or what happens with invalid filters. The mention of '73 proven' adds some transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences, front-loading the main purpose and then the optional filtering. Every word is informative with no fluff.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (one optional parameter) and the existence of an output schema, the description covers the core functionality and filtering option completely. Sibling tools provide additional context.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0%, so the description must compensate. It lists the acceptable filter values (Structure, Proportion, Era, Weight) and explains the parameter's purpose as contrast type filtering, which adds meaning beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb 'Return' and the resource 'font pairings', along with a specific count (73) and optional filtering. It distinguishes itself from sibling tools like generate_typography_system and search_fonts.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context that this tool returns all pairings with optional filtering, but does not explicitly state when to use versus alternatives or when not to use.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_scalesA
Return all 8 typographic scales with ratios and use-case recommendations.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Output Schema
| Name | Required | Description |
|---|---|---|
| result | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries full burden. It correctly indicates this is a read operation returning data, but it does not mention any constraints (e.g., rate limits, caching, or if the list is static). The behavior is straightforward, but additional context (e.g., 'returns a list without side effects') would improve transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, concise sentence that states the action and result. It is front-loaded with the key action 'Return all 8 typographic scales' and essential details. No superfluous words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has no parameters and an output schema exists, the description adequately conveys the purpose. It could mention that the output schema provides structured data, but that is implied by 'return'. The tool is simple, and the description covers its main function.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
There are zero parameters, so the baseline score is 4. The description adds no parameter-level information, but none is needed since the schema has no parameters. The description covers the tool's output scope.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it returns all 8 typographic scales with ratios and use-case recommendations. It specifies the exact number and contents, and the name 'list_scales' along with the siblings (e.g., list_pairings, search_fonts) implies this is the dedicated tool for scales, distinguishing it effectively.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No explicit guidance on when to use this tool versus alternatives like list_pairings or generate_typography_system. The purpose is implied by the name, but the description could benefit from stating that this is for predefined scales, not custom or paired ones.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
lookup_fontA
Look up a specific Google Font by exact name. Returns full metadata.
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes |
Output Schema
| Name | Required | Description |
|---|---|---|
| result | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden. It mentions 'returns full metadata' indicating a read operation, but lacks details on auth requirements, rate limits, or any side effects. The behavior is minimally disclosed.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two short, front-loaded sentences with no wasted words. Every part adds value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has only one parameter and an output schema (not shown but present), the description provides sufficient overview. It could mention edge cases like what happens if name doesn't match, but overall adequate.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0%, but the description adds that the name must be 'exact', clarifying the parameter's expectation beyond the schema's type string alone. This adds meaningful usage context.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses specific verb 'look up' and resource 'Google Font', with exact name requirement, clearly distinguishing it from sibling tools like search_fonts. It also states 'returns full metadata', clarifying the output.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The phrase 'by exact name' implies using this tool when you have a precise font name rather than fuzzy search, providing implicit guidance. However, it does not explicitly state when not to use it or mention alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| mode | No | single | |
| tier | No | ||
| query | Yes | ||
| max_results | No |
Output Schema
| Name | Required | Description |
|---|---|---|
| result | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided; description only covers modes and tier filter without disclosing output format, pagination, or any other behavioral aspects like read-only nature.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Extremely concise with clear bullet points for modes; every sentence adds value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Output schema exists but not described; missing explanation for query and max_results; sibling tools exist but description doesn't explicitly contrast.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0%. Description adds meaning for mode (options) and tier (applies to single mode only), but does not explain query or max_results parameters.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States 'Search Google Fonts by description, mood, or use case' and details modes, clearly distinguishing from siblings like lookup_font (specific lookup) and list_pairings/list_scales (pre-defined sets).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Describes modes and tier filter constraints, giving context on when to use each mode, but does not explicitly state when not to use or provide alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
1 tool update
v1.3.1- Changed
generate_typography_system2 fields changed- changed
Input schema / properties / body_weights / defaultPrevious value: -"300,400,500,600,700"New value: +"300;400;500;600;700" - changed
Input schema / properties / heading_weights / defaultPrevious value: -"400,700"New value: +"400;700"
5 tool updates
v1.3.0- First observed
generate_typography_system - First observed
list_pairings - First observed
list_scales - First observed
lookup_font - First observed
search_fonts
TDQS
Each tool serves a clearly distinct purpose: searching by description, exact lookup, generating systems, listing scales, and listing pairings. No overlap or ambiguity in responsibilities.
All tool names follow a consistent verb_noun snake_case pattern: search_fonts, generate_typography_system, lookup_font, list_scales, list_pairings. Predictable and uniform.
With 5 tools, the server is well-scoped for its purpose—covering search, lookup, generation, and reference data without unnecessary bloat or omissions.
The tool surface covers the full lifecycle of working with Google Fonts: discovering fonts, retrieving metadata, generating typography systems, and accessing curated scales and pairings. No obvious gaps.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
- CalmSEOOAuthcom.calmseo
SEO MCP server for keyword research, SERP analysis, audits, and Search Console workflows.
MCP server for VC pitch-deck scoring, thesis-fit matching, and deal-flow management.
MCP server for progressive tool usage at any scale (see https://klavis.ai)
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceMCP server for AI agents to make structured design decisions with direction, palette, typography, layout, and detail signatures, supporting multiple rendering backends and 56 visual styles.21AGPL 3.0
- AlicenseAqualityDmaintenanceA unified MCP server for Glyphs font design software, integrating handbook queries and API reference lookups. Enables searching documentation, managing plugins, and accessing development templates through Claude.25MIT
- AlicenseBqualityCmaintenanceMCP server for generating images and audio using Google's Gemini AI models.22MIT
- FlicenseNot gradedqualityCmaintenanceAn expert design advisor MCP server that researches live discussions, scans project files, and automatically downloads font files for your project setup.9-
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/sliday/google-fonts-skill'
If you have feedback or need assistance with the MCP directory API, please join our Discord server