marcbachmann / node-html-pdf

This repo isn't maintained anymore as phantomjs got dreprecated a long time ago. Please migrate to headless chrome/puppeteer.
MIT License
3.55k stars 544 forks source link

Custom fonts are rendered in Italic style #569

Open josephkuruvilla opened 4 years ago

josephkuruvilla commented 4 years ago

Hi I have used some custom fonts to generate PDF. I have set the absolute path in the base url. But the problem is all fonts are rendering in italic fonts even though its in normal.

@font-face { font-family: 'effraregular'; src: url('../fonts/effra_rg-webfont.eot'); src: url('../fonts/effra_rg-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/effra_rg-webfont.woff2') format('woff2'), url('../fonts/effra_rg-webfont.woff') format('woff'), url('../fonts/effra_rg-webfont.ttf') format('truetype'), url('../fonts/effra_rg-webfont.svg#effraregular') format('svg'); font-weight: normal; font-style: normal; }

eltharynd commented 3 years ago

Mine as well
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700');

font-style: normal; does not help

jacky-utwani commented 3 years ago

Mine as well @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');

kamilml commented 3 years ago

Mine as well

<link href='https://fonts.googleapis.com/css2?family=Alata&display=swap' rel='stylesheet'>

font-family: 'Alata';

AnishLushte07 commented 3 years ago

Hi,

Any update on this?

AnishLushte07 commented 3 years ago

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url("./Poppins-Regular.ttf"); }

this is working for me.

50l3r commented 3 years ago

I having the same issue with "Font Awesome 5 Pro" icons

font-style: normal; dont work

britzdylan commented 3 years ago

has this issue been resolved?

GuilleAntico commented 3 years ago

i'm having the same issue. the fonts are not being rendered on PDF. any updates ?

sihilelh commented 2 years ago

Go to the import CSS link, copy the Latin font faces and paste it into your stylesheet. It worked for me.

Ex: @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

NetSpud commented 2 years ago

bump, I have this problem too, doing what @sihilelh advised didn't work either

logispire commented 2 years ago

i have this same problem too, @sihilelh trick doesn't work for me.

i am using linux server on aws

amorimcode commented 1 year ago

same problems here using google fonts

felipe-fator3 commented 1 year ago

It's been over 2 years now and the issue seems to persist... What I noticed is that the italic effect doesn't happen to all fonts. If you try Roboto or Lato, for example, they'll render properly (not italic):

<style>
@import url('https://fonts.googleapis.com/css?family=Lato');

* {
    font-family: 'Lato', 'Times';
}
</style>

I don't know why, though...

jjuannn commented 1 year ago

Same problem here. Any workaround? I'm not being able to use Montserrat

aslamhamza004 commented 2 weeks ago

same issue. any update?

jjuannn commented 2 weeks ago

I went with pdfkit and svg-to-pdfkit. A bit trickier but does the work.