Curated, opinionated Claude Code skill for finding a typeface for your project that isn't Inter.
SaferSkills independently audited fonts (Agent Skill) and scored it 92/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 2 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 2 flagged
The text {match} tells the agent to skip the normal "ask the user first" gate. Used adversarially it removes the human-in-the-loop check before destructive or sensitive actions, turning a normally-gated agent into a fire-and-forget executor.
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
You have access to the user's curated font list in fonts.md (in this skill's directory). Read it before responding to any font-related question.
fonts.md (in this skill's directory), ask questions, present options, and wait for a selection. Only investigate the project's stack/framework when it's time to do the actual setup./fonts. Use AskUserQuestion with up to 3 questions in a single call:The user can always pick "Other" (auto-included) for free-text input.
heading, body, or code. Match recommendations to the hierarchy level the user needs filled. If they need a body font, don't suggest heading-only fonts. Never surface code-tagged fonts in the main heading/body flow — they're handled separately.<link> tag, CSS @import, or next/font/google depending on stack@import from their CDN, or provide download link for self-hostingfonts.md): Download the .woff2 files using curl from the Download URL + filenames from the file manifest in fonts.md. Place them in the project's font directory (e.g., public/fonts/ or src/assets/fonts/). Set up @font-face declarations pointing to the downloaded files. If the download fails, fall back to showing the URL column link and asking the user to download manually.manual): Set up @font-face declarations with the correct file paths, then prominently tell the user to download the font files from the URL column and place them in the font directory. Do not bury this — make it the first thing the user sees after setup.font-family declarations with the correct fallback stack (see below)next/font for Next.js, global CSS for Vite, Tailwind config, etc.)glyphhanger or pyftsubset can strip unused glyphs and cut file size significantly. Google Fonts handles this automatically via unicode-range splitting — no action needed there.-webkit-text-size-adjust: 100% on the root element to prevent unexpected text resizing in landscape orientation on iOS.Always include these fallbacks in font-family declarations. No other fallbacks — these are the stacks.
system-ui, "Helvetica Neue", sans-serifCharter, "Bitstream Charter", Georgia, serifui-monospace, "SF Mono", monospaceFor example, a sans setup should produce: font-family: "Geist", system-ui, "Helvetica Neue", sans-serif;
Each font in fonts.md has a Variable column. Always prefer the variable version when available — don't ask the user, just use it. Variable is strictly better: smaller total payload, one file, more flexibility.
When a font is variable:
[email protected]), not individual weights (wght@400;700).woff2 file with font-weight: 100 900 (range) in the @font-face blockweight array — next/font automatically pulls the variable file when no explicit weights are specifiedfont-weight, font-stretch) for weight and width axes. Do not use font-variation-settings unless the font has a custom axis with no CSS property mapping.When a font is static-only, specify explicit weights in the import and @font-face declarations as usual.
After filtering the font list to what's relevant, present the top 2–4 candidates using AskUserQuestion:
Don't dump the entire list. Filter to what's relevant based on the user's stated needs and context.
After the user selects their heading/body pairing, if the project type is SaaS app, recommend a monospace font. Use AskUserQuestion with a single yes/no question:
If the user says yes, present the code-tagged fonts from fonts.md using the same presentation format (label = font name, description = vibe + source).
When setting up fonts for SaaS apps, include font-variant-numeric: tabular-nums in the CSS for any element that displays numbers in alignment-sensitive contexts — tables, dashboards, metric cards, counters, or timers. This prevents digits from shifting layout as values change. Apply it scoped to those contexts, not globally.
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.