I'm trying to convert an SGV to PNG using the library svgToPng
This works great, other than the custom Google font I am using does not display properly.
What should look like this
Instead instead looks like this
Here is the complete code which includes the font as a base64 string, this renders fine in a browser, but when ran on nodeJS does not work. I've also tried having the font files with relative and absolute paths to the Google CDN, both of which do the same result.
I am wanting to run this as an Azure Function, so the option to install the font on my machine isn't an option which I have seen before in others answers.
var svgString = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800"><defs></defs><style>@font-face { font-family: 'Dokdo'; src: url(data:application/font-woff2;charset=utf-8;base64,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) format('woff2'); font-weight: normal; font-style: normal;}</style><g><rect fill="rgb(80,80,80)" stroke="none" x="0" y="0" width="150" height="70"></rect><text fill="rgb(255,255,255)" font-family="Dokdo" font-size="50px" x="10" y="50">TEST</text></g></svg>`;
var buffer = await svg2png(Buffer.from(svgString));
var result = await buffer.toString("base64");
console.log(result);
If your SVG contains text and used on an
<img>
tag, web fonts will not render on all browsers due to security reasons, and will be displayed using system fonts (mostly Times New Roman).You must embed the fonts first. Try https://vecta.io/nano to compress your SVG and download it as PNG. If it doesn't embed your fonts, use Sketch, Photoshop, ... to vectorize the font first.