Generating Social Preview Images Without a Single Font File

A post shared on WhatsApp or Slack with no cover image gets a blank preview card, which is a worse first impression than no link preview at all. The fix — a route that renders a 1200×630 image per post on the fly — sounds like it needs a font pipeline, a rendering service, or at minimum a webfont fetch. It needed none of that.

What the image is actually made of

The route builds a plain JSX tree — a title, a date, a small wordmark — and hands it to Next's built-in ImageResponse, which rasterizes it to PNG using the system's default sans-serif and monospace stacks. No font file is downloaded, embedded, or bundled; the same fallback stack a browser would use without a custom @font-face does the whole job.

The one thing that had to be handled explicitly

A title long enough to overflow a fixed-size card doesn't wrap the way a browser page would — it just needs a font size that fits, decided ahead of render time instead of after. The fix is three size tiers keyed off character count, not a truncation ellipsis, because cutting a title off mid-sentence in a preview card is a worse failure than shrinking it slightly.

Why the constraint was the interesting part

The feature that shipped is smaller than the one that was scoped — no font loading, no image-generation service, no caching layer beyond the route's own revalidate window. Every piece that looked necessary going in turned out to be something the platform already did by default, and the actual work was noticing that before building substitutes for capabilities that were never missing.