font family in svg not applied

[snaps-david]

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-family="Arial, Helvetica, sans-serif">Sans serif</text>
  <text x="100" y="20" font-family="monospace">Monospace</text>
</svg>

const svgData = data:image/svg+xml;base64,${Buffer.from(svgString).toString('base64')};
const img = await loadImage(svgData);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

It does draw text on canvas, but font family is not applied.

Anybody experiencing the same issue?

[snaps-david]

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-family="cursive">Sans serif</text>
  <text x="100" y="20" font-family="monospace">Monospace</text>
</svg>

I tried with cursive font here.

This was converted to base64 below

data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDx0ZXh0IHk9IjIwIiBmb250LWZhbWlseT0iY3Vyc2l2ZSI+U2FucyBzZXJpZjwvdGV4dD4KICA8dGV4dCB4PSIxMDAiIHk9IjIwIiBmb250LWZhbWlseT0ibW9ub3NwYWNlIj5Nb25vc3BhY2U8L3RleHQ+Cjwvc3ZnPg==

However, when drawn on node canvas using the base64, font is not applied :(