Font Picker Skill

Install

Install it with the skills CLI, which sets it up for whichever agents you use:

npx skills add mrmartineau/fonts.zander.wtf

Or install it manually: copy theskill/font-picker directory from the repository into your agent's skills folder — for Claude Code that's.claude/skills/ in a project or~/.claude/skills/ for all projects.

What it does

Once installed, your agent uses this site's hand-curated catalog whenever typography comes up — choosing a font for a new site, finding a code font, or pairing a heading face with a body face. Every font is free for commercial use and has a live specimen page here to preview it. The skill knows how to:

• Shortlist two or three fonts that fit the job — UI, long-form reading, code, retro, display — with a specimen link for each so you can see them before committing.
• Suggest pairings: a characterful heading face with a workhorse body face, or one variable font that covers both roles.
• Write the loading code — a Google Fonts embed, a Fontsource npm package, or self-hosted @font-facerules — with sensible fallback stacks andfont-display: swap.
• Handle the gotchas: Google Fonts and Fontsource serve stripped builds, so when a design needs OpenType features (slashed zeroes, stylistic sets, small caps) it recommends self-hosting the original files.

The skill bundles a snapshot of the catalog and also reads the live data from fonts.json, so it picks up fonts added after it was installed.

Try asking your agent

• “Pick a font for my developer blog.”
• “I want something like Inter, but with more character.”
• “Suggest a heading and body pairing for a portfolio site.”
• “Give me a pixel font for a retro game landing page.”