Font is doubled when creating pdf from html

Question

I am building a web application with node.js that should create a pdf from a given HTML snippet.

For this I am using the html-pdf package. Everything works fine except for one bold font. When using this font with a font weight of 900, it looks like the font is doubled with an offset. You can see the effect in the picture (especially at the "3").

My CSS Code looks like this:

@font-face {
    font-family: 'Proxima Nova Condensed';
    src: url("/fonts/ProximaNovaCond-Regular.ttf") format("truetype");
    font-weight: 400; 
}
@font-face {
    font-family: 'Proxima Nova Condensed';
    src: url("/fonts/ProximaNovaCond-Bold.ttf") format("truetype");
    font-weight: 700; 
}
@font-face {
    font-family: 'Proxima Nova Condensed';
    src: url("/fonts/ProximaNovaCond-Extrabold.ttf") format("truetype");
    font-weight: 800; 
}
@font-face {
    font-family: 'Proxima Nova Condensed';
    src: url("/fonts/ProximaNovaCond-Black.ttf") format("truetype");
    font-weight: 900; 
}

In the web application this works but when generating the pdf I am getting this problem.

Can anyone help me with this?

Not a real solution but I dowloaded the font again as otf and now it doesn't work for 100% but the "double effect" seems less striking. — Cimoe, Feb 20 '20 at 14:51

score 0 · Answer 1 · answered Feb 20 '20 at 09:55

0

can you try to add font-style ?

https://www.w3schools.com/cssref/pr_font_font-style.asp

answered Feb 20 '20 at 09:55

mahpgnaohhnim

63
1
8

The problem still exists when adding font-style. – Cimoe Feb 20 '20 at 10:16

Font is doubled when creating pdf from html

1 Answers1