My OG image cards rendered in the wrong font — the screenshot was racing the webfont download
Last month a few of my social preview cards started rendering in the wrong font. I generate Open Graph images from a title and description on a 1200x630 template, and the cards are supposed to use a specific display font. Some of them came out in the fallback serif instead — no errors, no warnings, just wrong-looking text. The pattern was the clue: it only happened on the first render after a deploy, or in a cold container. Locally, everything was perfect. That smelled like caching, and it was — browser font caching, not mine. The generator renders an HTML template in headless Chromium and screenshots it. My code did goto(url) followed by screenshot() as fast as possible. On my dev box the woff2 was already in Chromium's disk cache, so it loaded "instantly." In a fresh container, the font had to travel from the font host, taking anywhere from 200 to 800ms — and Chromium helpfully paints with a fallback font while it waits. My screenshot never waited. I was shipping a...