Webfonts aren't loading correctly in Grapher thumbnails

[ikesau]

Note the headings aren't using Playfair Display:

These are being loaded as SVGs e.g. https://assets.ourworldindata.org/grapher/exports/number-of-nuclear-weapons-tests.svg

Which loads correctly when visited, but when it's embedded in a page, it doesn't work.

We recently refactored our Cloudflare functions, which might have something to do with it.

I'm also noticing that we're not preloading Playfair via a <link>, but instead requesting it in the CSS:

Whereas we're linking to Lato:

Though Lato is also not being used in the embed (note the tail of the g)

Embed:

Loaded directly:

[danyx23]

@ikesau we just talked about this and it seems a bit tricky (web fonts are often sandboxed in svgs but the precise workings of this is a bit of a mystery to us). We'd suggest switching to PNG to unblock you and we'll keep this issue open with an appetite of up to 3 hours to make this work with SVGs in the future.