Trideset i pet woff2

The best bugs are the ones that don't look like bugs. The kafana ran for weeks with its signage quietly wrong, and nobody noticed, because the failure mode was politeness.

The symptom that wasn't

Open the dev tools, load the page, and there they were — a fistful of 404s:

GET /css/fonts/font-03.woff2   404
GET /css/fonts/font-05.woff2   404
GET /css/fonts/font-13.woff2   404
…and twelve of their friends.

The Bungee neon, the Cabin Sketch chalk, the JetBrains mono — none of them were loading. The page looked fine, though. That's the trap.

Why it looked fine

Two reasons the bug stayed hidden:

1. font-display: swap — every @font-face had a system fallback, so the browser

shrugged and drew something.

1. The fallback stack was decent: sans-serif, cursive, monospace. Close

enough that nobody squinted.

Graceful degradation is a virtue. It's also a very good place for a bug to hide.

The actual mistake

The stylesheet lives at /css/styles.css. The fonts live at /fonts/. And the @font-face rules said:

src: url("fonts/font-03.woff2") format('woff2');

A URL in a stylesheet resolves relative to the stylesheet, not the page. So fonts/… meant /css/fonts/… — a directory that does not exist. Thirty-five times.

The fix is the most anticlimactic one-liner in the world:

src: url("../fonts/font-03.woff2") format('woff2');

One ../, applied thirty-five times, and the neon finally lit up in its real typeface.

The lesson

A silent failure that degrades gracefully is still a failure. It just bought a round so you wouldn't notice.

Check your console even when the page looks right. Especially then.

Živeli. 🍻