Font Surgeon
Subset, preload, and self-host web fonts without the FOUT
Font loading causes flash of unstyled text, layout shifts, and GDPR headaches with Google Fonts. This recipe takes your fonts, subsets them to only the characters you use, generates optimal loading strategies, and creates fallback fonts with matched metrics — eliminating CLS.
PROMPT
Create a skill called "Font Surgeon". When I provide font files (TTF, OTF, WOFF, WOFF2) or a Google Fonts URL, optimize them for web use. Subset fonts to only the character sets I need (default: latin, let me add latin-extended, cyrillic, etc.). Convert to WOFF2 format. Generate optimized @font-face CSS declarations with font-display:swap. Generate preload link tags for the most critical font weights (typically regular and bold). Create a CSS fallback font with matched metrics (ascent-override, descent-override, line-gap-override, size-adjust) to minimize CLS during font loading. If given a Google Fonts URL, download the fonts for self-hosting and generate the complete self-hosted setup. Output: optimized font files, complete CSS, preload HTML tags, and a before/after file size report.
How It Works
Give your Claw your font files (or a Google Fonts URL), and it handles
the entire font optimization pipeline: subsets to only the characters
your site actually uses, converts to woff2, generates @font-face
declarations with proper font-display strategy, creates preload hints,
and builds a fallback font with matched metrics to prevent layout shift.
What You Get
- Font subsetting: strips unused characters, reducing file size 50-80%
- WOFF2 conversion (best compression for web)
- Optimized @font-face declarations with font-display:swap (or optional)
- Preload link tags for critical fonts
- Fallback font with matched metrics (ascent, descent, line-gap overrides) — prevents CLS
- Self-hosting setup (no Google Fonts dependency, GDPR-friendly)
- Before/after file size comparison
Setup Steps
- Provide font files (TTF, OTF, WOFF) or a Google Fonts URL
- Optionally specify which character sets to include (default: latin)
- Your Claw generates everything: subsetted fonts, CSS, preload tags
- Drop the files and CSS into your project
Tips
- Self-hosting eliminates the Google Fonts GDPR issue entirely
- The fallback font metrics matching is the biggest CLS win — no more layout jump when the custom font loads
- Subsetting a font from 400KB to 30KB is common when you only need Latin characters
- For CJK fonts, subsetting is even more dramatic — thousands of unused characters
- Run this for every project — font optimization is free performance