That empty □ box isn't a broken character — it's a missing glyph. Here's how I stopped patching tofu with SVGs and built a font that physically can't tofu.
You've seen it: a little empty rectangle where a symbol should be. Designers call it tofu. The text is fine — the font just doesn't contain a shape for that codepoint, so the browser draws a box and moves on.
It bit me on a tiny "★ wildcard" badge in an admin panel. Instead of a star, I got □ wildcard.
The one insight that explains every tofu box
A font-family stack is resolved per character. For each codepoint the browser walks your stack until a font has a glyph for it. If none do — tofu.
