Can I use this skill without browser access?

Yes, it includes a robust Fallback Mode with expert-curated font pairings for various aesthetics like 'Minimal', 'Editorial', or 'Corporate' when tools are unavailable.

Does it support Tailwind CSS integration?

Absolutely. Once a font stack is chosen, it generates the exact JSON configuration needed for your tailwind.config.js file.

How does the Typography Selector browse fonts?

The skill uses browser automation to navigate Google Fonts directly, allowing Claude to capture screenshots of trending fonts and present them to the user for selection.

Why does the skill suggest avoiding fonts like Inter or Roboto?

To help your project stand out. The skill prioritizes distinctive pairings that avoid the 'generic template' look common in AI-generated or default-heavy designs.

Typography Selector

Name: Typography Selector
Author: davepoon

bydavepoon

•

2,257

Design Tools

Selects and implements professional font pairings for frontend projects using real-time Google Fonts browsing and expert design patterns.

About

The Typography Selector skill empowers Claude to act as a professional UI designer by browsing live Google Fonts, suggesting curated pairings based on specific aesthetics—such as Minimal, Editorial, or Neobrutalism—and instantly generating implementation code. It streamlines the design-to-code workflow by providing ready-to-use Google Font imports and Tailwind CSS configurations, ensuring your projects have high-quality typography that avoids a generic appearance while maintaining optimal readability and performance.

Key Features

Curated font pairings for specific design aesthetics like Dark & Premium and Y2K
Built-in typography best practices for line height, spacing, and font weights
Real-time Google Fonts browsing and screenshot analysis via browser automation
2,257 GitHub stars
Automatic generation of Google Fonts HTML <link> import snippets
Instant Tailwind CSS font family configuration mapping

Use Cases

Rapidly prototyping themed UI designs with consistent type scales and weights
Designing a high-conversion landing page with unique, non-generic typography
Modernizing an existing project by replacing default fonts with professional pairings

About

Key Features

Curated font pairings for specific design aesthetics like Dark & Premium and Y2K
Built-in typography best practices for line height, spacing, and font weights
Real-time Google Fonts browsing and screenshot analysis via browser automation
2,257 GitHub stars
Automatic generation of Google Fonts HTML <link> import snippets
Instant Tailwind CSS font family configuration mapping

Use Cases

Rapidly prototyping themed UI designs with consistent type scales and weights
Designing a high-conversion landing page with unique, non-generic typography
Modernizing an existing project by replacing default fonts with professional pairings