Use custom font with nodeJs and svgToPng

428 views Asked by At

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

enter image description here

Instead instead looks like this

enter image description here

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);
1

There are 1 answers

1
S. Esteves On

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.