fontfetch

The public web is the world’s largest type specimen. Extracting anything useful from it is surprisingly painful.

One command. Every webfont. Licence-classified.

npx fontfetch <url> produces a folder with every webfont, an emitted fonts.css (with font-display: swap and <link rel=preload> hints), framework configs for Next.js / Tailwind / vanilla CSS, and a per-face LICENSE_REVIEW.md. With the right flag it also emits capsize-driven zero-CLS fallback blocks and harfbuzzjs-subset variants containing only the codepoints the page renders.

• 01CLI
  Extract & emit

  Walk @import-chained stylesheets, download every face, write a provenance-bucketed bundle.

• 02CLI
  Inspect

  Terminal-native Wakamai-Fondue equivalent. Glyph count, axes, OpenType features, OFL detection.

• 03CLI
  Subset & fallback

  harfbuzzjs WASM subsetting, capsize size-adjust fallbacks. Pure Node, no Python dep.

• 04Webapp
  Foundry-style UI

  Paste URL, watch the SSE pipeline run, then open each family as a type specimen.

Open-core architecture. The pipeline lives in @fontfetch/core — a workspace package consumed by the published CLI (via tsup --noExternal) and by the private webapp (via workspace:*). The SSE wire format is literally core’s PullProgressEvent discriminated union. No parallel codepaths between surfaces.

Open-core in two pieces. A public OSS surface that consumers see on npm, and a private fullstack monorepo that the webapp ships from. One-way sync (public → private) preserves SHAs across the boundary, so git blame works cleanly across the open / closed split.

The user-facing flow streams events from server to client over SSE while a Node-runtime route handler walks the URL’s stylesheets, downloads every @font-face binary, and emits typed progress frames the client renders in real time.

1. 01

   Shipped a Node-native font extraction pipeline that walks `@import`-chained stylesheets, captures every `@font-face` with weight/style/unicode-range/source intact, and writes provenance-bucketed output (`files/<google|adobe-typekit|commercial|open-cdn|self-hosted>/<name>`).

2. 02

   Built `fontfetch inspect` — terminal-native Wakamai Fondue equivalent that prints glyph count, units-per-em, variation axes, OpenType features, name-table strings, vendor, copyright, and SIL OFL detection with Reserved Font Name (RFN) clause awareness.

3. 03

   Built `--fallback` flag emitting framework-agnostic capsize-driven `size-adjust` / `ascent-override` / `descent-override` / `line-gap-override` blocks — solves the same CLS problem `fontaine` solves without the Nuxt/Vite coupling.

4. 04

   Built `fontfetch subset` — Playwright DOM walk + harfbuzzjs WASM subset, pure-Node, no Python `fonttools` dependency (unlike `glyphhanger`).

5. 05

   Shipped a license classifier with first-match-wins precedence across known commercial CDNs (Adobe Typekit, Monotype fast.fonts.net, Hoefler cloud.typography.com, Type Network) plus a curated SIL OFL / Google Fonts fallback catalog, biased toward false-commercial as the safer failure mode.

6. 06

   Designed and implemented an SSE Route Handler (`POST /api/pull`, Node runtime, `maxDuration=90`) that streams `PullProgressEvent`s as `data: <json>\n\n` frames over a fetch-reader pattern (POST + body, not EventSource), with `req.signal` abort propagation and `X-Accel-Buffering: no` to defeat ALB buffering.

7. 07

   Built a three-layer SSRF guard (protocol whitelist → hostname class blocklist → DNS resolution against RFC1918 / link-local / AWS metadata `169.254.169.254`) that runs before any network I/O — public-looking hostnames resolving into private CIDRs are caught.

8. 08

   Set up FAANG-grade open-core dual-repo workflow: public `fontfetch` repo + private `fullstack` repo as sibling clones, with public→private sync via `git fetch public && git merge public/main` preserving original public SHAs in private history (Vercel/GitLab/Sentry pattern).

1. P01

   Streaming Server-Sent Events through a managed load balancer without losing the abort signal — solved with a Node-runtime Route Handler (not Edge), `fetch` + `ReadableStream` reader on the client (EventSource is GET-only, the URL needs to go in a POST body), and explicit `Cache-Control: no-cache, no-transform` + `X-Accel-Buffering: no` headers so the ALB never buffers a 5–60s stream. Client unmount fires `AbortController.signal`, which propagates to `req.signal.abort` on the server, which closes the `ReadableStream` controller — leaks-free.

2. P02

   Building an SSRF perimeter that catches public-looking hostnames resolving into private ranges — the obvious checks (protocol whitelist, `localhost` blocklist) catch fat-fingers but miss the real attack: `internal.example.com` resolving to `10.0.0.5`. Solution: `dns.lookup(hostname, { all: true })` then checking every record against RFC1918 CIDRs, IPv6 ULA, link-local, and AWS metadata IP, with conservative bias (false-reject is recoverable; false-accept is not).

3. P03

   Maintaining a private fullstack monorepo and a public OSS mirror without leaking proprietary code into public history — solved by treating `fonts/opensource/` (push to `origin` = public GitHub) and `fonts/fullstack/` (push to `fullstack` = private GitHub) as two sibling on-disk repos, with `fullstack` carrying a read-only `public` remote whose push URL is intentionally disabled. Sync is one-way (public→private via fetch+merge), preserving original public commit SHAs in private history so `git bisect` and `git blame` work cleanly across the split.

• “L01

  Heuristic classifiers should be biased toward the safe failure mode.

  The license classifier prefers false-commercial over false-open because a user shipping a commercial face they thought was OFL has a legal problem; a user told their OFL face is commercial just runs `--force`.

• “L02

  Framework-agnostic beats framework-native when the underlying capability is identical.

  `--fallback` works in any CSS surface (Next.js with or without next/font, Astro, Tailwind, plain HTML) precisely because we resisted the urge to ship a Vite plugin. Each framework integration is a smaller audience; the capability is the wedge.

• “L03

  When you publish an open-core CLI, your private webapp should consume the same library — not a fork.

  `@fontfetch/core` is a workspace package the CLI bundles via `tsup --noExternal` and the webapp imports as `workspace:*`. The wire format for the SSE event stream is literally the library's `PullProgressEvent` type, with two extra SSE-only variants (`accepted`, `fatal`). Zero parallel codepaths.