219 words
2 minutes
Goodbye Font-Spider: Precise Font Subsetting with Custom Scripts
AI SummaryGemini 2.5 Pro
Why Migrate?
In an Astro blog, multi-megabyte Chinese fonts are the primary culprits behind slow first-paint times. Previously, I used Font-Spider, but as the project grew more complex, several issues emerged:
- Maintenance:
font-spiderhasn’t been updated in years and lacks support for modern CSS. - Pathing Hell: It struggles with absolute paths in the build output (e.g.,
/MiSans-Regular.ttf), requiring complex--maparguments. - Black Box: Hard to integrate into modern TypeScript workflows with vague error reporting.
To solve this once and for all, I decided to write a custom script based on subset-font. (Actually, AI did most of the heavy lifting; I’m just documenting it.)
Migration Steps
Step 1: Clean House
First, remove the obsolete tools and old scripts.
pnpm remove font-spiderrm scripts/compress-font.jsStep 2: Install Modern Dependencies
We need a few core libraries:
subset-font: The core subsetting engine.he: For handling HTML entities.tsx: To run TypeScript scripts directly.
pnpm add -D subset-font he tsxStep 3: The font-subset.ts Script
Create scripts/font-subset.ts. The logic is simple:
- Scan the
dist/folder for HTML files. - Extract and deduplicate all visible text.
- Read the source font.
- Subset using
subset-fontand overwrite the original file.
(Refer to the original post for the implementation details).
Step 4: Build Integration
Update package.json to trigger the script after building:
{ "scripts": { "build": "pnpm run validate-config && astro build && tsx scripts/font-subset.ts" }}Now, every build will automatically prune your fonts from MBs to KBs based on your site’s actual content.
Goodbye Font-Spider: Precise Font Subsetting with Custom Scripts
https://wtada233.top/en/posts/font-migration-tutorial/ Last modified on 2025-12-26
0 Comments