node-html-pdf icon indicating copy to clipboard operation
node-html-pdf copied to clipboard

Custom fonts are rendered in Italic style

Open josephkuruvilla opened this issue 4 years ago • 16 comments

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; }

josephkuruvilla avatar Apr 23 '20 15:04 josephkuruvilla

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

font-style: normal; does not help

eltharynd avatar Jul 14 '20 14:07 eltharynd

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

jacky-utwani avatar Aug 18 '20 11:08 jacky-utwani

Mine as well

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

font-family: 'Alata';

kamilml avatar Aug 20 '20 13:08 kamilml

Hi,

Any update on this?

AnishLushte07 avatar Aug 28 '20 08:08 AnishLushte07

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

this is working for me.

AnishLushte07 avatar Aug 28 '20 08:08 AnishLushte07

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

font-style: normal; dont work

50l3r avatar Mar 05 '21 16:03 50l3r

has this issue been resolved?

britzdylan avatar Jun 12 '21 18:06 britzdylan

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

GuilleAntico avatar Jul 02 '21 15:07 GuilleAntico

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; }

sihilelh avatar Jan 07 '22 18:01 sihilelh

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

NetSpud avatar Feb 03 '22 11:02 NetSpud

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

i am using linux server on aws

logispire avatar May 26 '22 05:05 logispire

same problems here using google fonts

amorimcode avatar Aug 19 '22 20:08 amorimcode

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...

felipe-fator3 avatar Sep 15 '22 21:09 felipe-fator3

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

jjuannn avatar Mar 15 '23 14:03 jjuannn