Search code examples
htmlcssfontsphantomjsnode-html-pdf

Node-Html-Pdf custom condensed fonts not rendering correctly


I'm using node-html-pdf library to render an html page into a PDF on Node.js using Heroku. I'm facing an issue when using a custom system font Open Sans Condensed. I couldn't use the web font cause each character is being rendered as an svg, resulting in 10 times the size, so I installed the font locally (as a font on Mac and in the .fonts directory on Heroku). The problem is that both fonts on the Mac and Heroku are stretched out and not condensed. When rendering the html in a local browser, the font is rendered properly, but when passed through html-pdf, the fonts are stretched.

This is a sample css being used

*, html, body {
    margin:0;
    padding:0;
    font-family: 'Open Sans Condensed';
    font-weight: 300;
    font-stretch: condensed;
}

Tried it without font-strech property and still no luck. Same thing happened with different condensed fonts such as Avenir. Attaching a correct render: screen shot 2017-10-16 at 21 55 31

And an incorrect render:
screen shot 2017-10-16 at 21 55 11


Solution

  • So apparently, the issue was that the font wasn't supported natively on Heroku or any other Linux-based server expect for Mac. This results in the font being drawn out by the framework, or the incorrect font is shown. Unfortunately, there was no solution to this expect to choose a different font or set up a Mac server and use that one to generate the PDF.