node-html-pdf
node-html-pdf copied to clipboard
@font-face not working in pdf format
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?
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]
@marcbachmann can you help us please
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 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');
}
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;
}