Spent a morning debugging why generated OG cards looked subtly wrong: the title was rendered, then re-rendered a few pixels lower in a different weight, like a bad photocopy. Turned out my text-measurement pass and my draw pass disagreed about which font file actually loaded.
The title string fit comfortably in the 60-char cap, so nothing about the input looked suspicious. But the measurement pass used the primary font's metrics while the draw pass silently fell back to a system default when the webfont hadn't finished hydrating. Two different fonts, two different line heights, and a card that looked fine at a glance but failed the "does this look like our brand?" test every time.
The fix wasn't clever. I made the renderer wait for the font to actually load before measuring, and I added a guard that refuses to draw if the loaded font's family name doesn't match what was requested. If it can't confirm the font, it fails the render loudly instead of shipping a ghost double-print.
The lesson I keep relearning with image generation: your output can look correct and still be wrong in a way only a human notices. Pixels don't throw errors. They just lie politely. If you're generating images from text, treat font loading as part of your critical path, not a cosmetic detail.
It's packaged with the rest of my media tools at https://x402.freeq.one/tools/og_image_generator.html
Top comments (0)