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

@font-face not working in pdf format

Open aminjoharinia opened this issue 8 years ago • 5 comments

Hi i want to using a persian font and it works fine in html but when converting to pdf the font does not working , i think it can not read the local saved font

@font-face {
  font-family: Shabnam;
  src: url('Shabnam.ttf') format('truetype');
}

what should i do?

aminjoharinia avatar Aug 18 '17 16:08 aminjoharinia

Experiencing the same issue. the difference is I'm using

@font-face{ font-family: 'Code128bWin'; src: url('/fonts/Code128bWin.eot'); src: url('/fonts/Code128bWin.eot?iefix') format('eot'), url('/fonts/Code128bWin.woff') format('woff'), url('/fonts/Code128bWin.ttf') format('truetype'), url('/fonts/Code128bWin.svg#webfont') format('svg');
}

I'm using [email protected]

pwong2 avatar Sep 05 '17 00:09 pwong2

@marcbachmann can you help us please

pwong2 avatar Sep 05 '17 00:09 pwong2

If you like to load the assets from the local file system, you'll need to use an absolute path to your file: file:///absolute/path/to/asset

There's also a base option to set that by default. https://github.com/marcbachmann/node-html-pdf/blob/d7ae2439ef8082475a80f3045ddfa6dce7c5054e/bin/index.js#L27

On windows that's file:///C:/absolute/path/to/asset

marcbachmann avatar Sep 05 '17 00:09 marcbachmann

@marcbachmann thanks for the help! I used http host to load the fonts.

@font-face{ font-family: 'Code128bWin'; src: url('https://testurl.com/test/fonts/Code128bWin.eot'); src: url('https://testurl.com/test/fonts/Code128bWin.eot?iefix') format('eot'), url('https://testurl.com/test/fonts/Code128bWin.woff') format('woff'), url('https://testurl.com/test/fonts/Code128bWin.ttf') format('truetype'), url('https://testurl.com/test/fonts/Code128bWin.svg#webfont') format('svg');
}

pwong2 avatar Sep 05 '17 03:09 pwong2

I had the same problem, previous solutions with file:/// didn't work for me, so I managed to fix this including the file using a base64 encoded string in order to load the font:

  fontPath = fs.readFileSync(path.resolve(__dirname, '../templates/pdf/font/Roboto-Regular.ttf'));
  const fontRoboto = fontPath.toString('base64');

and then in the template:

      @font-face {
        font-family: 'Roboto';
        src: url('data:font/truetype;charset=utf-8;base64,{{this.fontRoboto}}');
        font-weight: normal;
        font-style: normal;
      }

Tarabor avatar Jan 09 '22 11:01 Tarabor