@font-face not included in SVGs

I’m currently attempting to render out some SVG graphs to JPEG. It works fine after inlining all styles, as there were some “insecure operation” warnings when trying to read from CSS, but one thing I just cannot get working is using web fonts in SVG.

I’ve tried both importing the fonts using @import from Google Fonts, and defining the font with @font-face.

I tried putting fontFamily: 'Roboto' in the style object of options, as well as inlining style={{fontFamily: 'Roboto'}} directly on a <text> SVG element, neither worked.

Probably worth mentioning I’m using React for this. I’m kinda running out of ideas. Any help?

[junkdeck]

Found a workaround for this, posting in case anyone else has the same issue.

const node = document.getElementById('chart-container')
node.querySelectorAll('text').forEach( tag => 
  (tag.style.fontFamily = "Roboto, Arial, Sans Serif")
)

[vivcat[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.