Using default fonts

[mitar]

It seems default fonts canvas 1 is using are pretty limited and do not really match those available in the browsers, even on the same system. So SVG rendered in the browser is different from a PNG rendered with this library it SVG contains text.

[fuzhenn]

node-canvas's parsing of font-familyis stricter than in browser: in node-canvas, font-family needs to be double quoted.
e.g.
bold 12px/20px arial,sans-serif is OK in browser, but with node-canvas it has to be
bold 12px/20px "arial,sans-serif"

You may give a try.

[fuzhenn]

In my experience, node-canvas's font rendering is always different from browser. I guess it's caused by cairo, the 2d graphics lib used by node-canvas.

[mitar]

Hm, I am using: font-family="Helvetica, Arial, Lucida Grande, sans-serif". So what I think it would be interesting if node-canvas 2.0 registerFont would be passed through so that I can register additional fonts. (Once this package will be using 2.0.)

[fuzhenn]

I have made a quick check of canvg's source codes, and found the font style is not double quoted in canvg.

I have fixed it here : fuzhenn/canvg@623676a

You can update your canvg and make another try.

[mitar]

Hm, I tried it but in my particular case I do not see a difference. It might that Helvetica is simply not available through Cairo?

[fuzhenn]

Yeah, i guess, Helvetica font is a system-dependent one. I have tested some other fonts (on Windows), and they are all correctly rendered.

And I'll update node-canvas to 2.0 once it's stable and released, maybe it can fix it.

[lookatitude]

I had the same problem on a project runing on AWS lambda, se solution was:
1 - add the fonts to your OS - in our case we used a layer to load the fonts into the aws image.
2 - before calling svg2img register your fonts in Canvas:
const Canvas = require('canvas') Canvas.registerFont('/var/task/fonts/Archivo-Regular.ttf', {family: 'Archivo'});