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

Published 20 hours ago • verified publisher icon marcbachmann

How to use custom fonts?

Open seltsam23 opened this issue 6 years ago • 6 comments

First of all, thanks for that great module!

Would someone elaborate on how to use custom fonts? I've seen the business-card example with @font-face definiton, but it's unclear to me what the file-path of the font must be relative to.:

<html>
   <head>
      <style>
         @font-face {
           font-family: 'MyOpenSans';
           font-style: normal;
           font-weight: 400;
           src: url(file://app/templates/fonts/OpenSans-Regular.ttf); <-- ?
         }
   </style>
     ...

Would appreciate some info!

seltsam23 avatar Oct 20 '18 09:10 seltsam23

You can try uploading font files to your server and try accessing from there. I am able to do this by using the following code:

@font-face { font-family: 'Aller_Rg'; src: url('https://MYS3BUCKET/assets/Aller_Rg.ttf') format('truetype') } p{ font-family: 'Aller_Rg'; font-size: 10px; }

You dont need to set base after this

mayurvir avatar Feb 04 '19 10:02 mayurvir

I'm trying to get this running in a lambda that's locked down. How would you do this by putting the font on the file system?

DanKaplanSES avatar Jul 02 '19 23:07 DanKaplanSES

I base64 the src if that helps.

@font-face {
  font-family: "CustomFont";
  font-style: normal;
  font-weight: 700;
  src: url(data:font/truetype;base64,....)
}

woodscreative avatar Aug 12 '19 08:08 woodscreative

I base64 the src if that helps.

@font-face {
  font-family: "CustomFont";
  font-style: normal;
  font-weight: 700;
  src: url(data:font/truetype;base64,....)
}

Yes! Thank you 👏🏼

indigomelody avatar Apr 20 '21 12:04 indigomelody

I base64 the src if that helps.

@font-face {
  font-family: "CustomFont";
  font-style: normal;
  font-weight: 700;
  src: url(data:font/truetype;base64,....)
}

Solved the problem that I was having for weeks. Thank you!

leewssam avatar Jul 12 '21 16:07 leewssam

I base64 the src if that helps.

@font-face {
  font-family: "CustomFont";
  font-style: normal;
  font-weight: 700;
  src: url(data:font/truetype;base64,....)
}

I'm using the same but still have the "DejaVuSans" font inside my PDF. How can if fix this?

marco910 avatar Jan 13 '22 17:01 marco910