node-html-pdf

node-html-pdf copied to clipboard

Hello, it seens I can't get the bold text in html files passed to the pdf. I tried different ways to get my text bold but none of the attempts were successful.

My attempts

1. HTML element <strong></strong>
2. HTML element <b></b>
3. CSS property font-weight: bold;

Maybe there is a problem?

A workaround is to use something like font-weight: 700; property. I am using it and it works pretty fine.

It didn't work for me, I've read there are some problems with phathonJS and linux...

Try to add font-weight: bold !important; to the very last child you want to bold. In my experience, the CSS is not inherited to subsequent child elements.

It's happening to me in Mojave. However, once deployed to Heroku, works fine.

@xpander001 did you find a workaround? Same here, and yes just upgraded OS.

+1

Same here, worked on Sierra, doesn't work on Mojave.

any update here? bold text are still not working...

Can someone please have a look at this?

I have the same issue where locally (Mac) the bold text doesn't show up, but once deployed on Heroku it works as expected. Unless you plan to serve this from your mac, I wouldn't worry about it. Also, it's not this package that has the issue, it's a dependency.

My guess is that you might be using some unique fonts which don't support BOLD. I've tried using google fonts it didn't work. But if I used 'DejaVuSans' font, it worked for me. My suggestion is to use that font which supports BOLD.

@kavishatalsania See my answer above. @dpolicastro this can be closed. If you want this to be an issue, add an issue to the broken dependency.

@MarcGodard Thanks for reporting, but before deploying an app to heroku you will probably want to test it, and the best way to do this is locally. It looks like an OS fonts/PhanthomJS problem, but this issue is helping people to address the problem so I'll let it here.

For anyone still looking:

I was importing fonts from google. I added the "bold" fonts also when selecting fonts and it worked.

Posting here because I didn't find this solution anywhere else.

@sulaysumaria on MacOS?

I faced this issue on Linux machine... But you can try on MacOS also, if this solves the problem.

@sulaysumaria I didn't have any issues on linux, but I did on MacOS

@MarcGodard Is your issue solved? I would be happy to help if you are still facing issue in this.

@sulaysumaria No it isn't, but as I said above, it doesn't effect production (on linux), only dev on my mac. So I don't care.

@MarcGodard

I'm still facing this issue.

Don't know what to do

Can you share your environment details..

Can you share your environment details..

I'm using a macOS 10.14.5

In my case, It's working when we are defining in CSS

Now, use b tags to make fonts bold.

I also encounter this issue (no bold text) when I run my app locally on Mac OS Mojave.

I have the same issue with macOS Mojave v10.14.6, any updates about fix?

i have the same issue with linux, any news ?

Same problem. 😞

Same here on Linux Mint.

I have the same issue with macOS Mojave v10.14.6, any updates about fix?

Maybe this helps others as well, I ended up using Puppeteer for pdf creation:

const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.setContent(templateHtml);

const pdf = await page.pdf({
	format: 'A4',
	printBackground: true
});

await browser.close();

const buffer = Buffer.from(pdf);
const bufferStream = new stream.PassThrough();

bufferStream.end(buffer);

return bufferStream;

A solution that works for my needs : include in the HTML the google font link :

<link` href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

html {
  font-size: 12px;
  font-family: 'Open Sans' !important;
  font-weight: 400;
}

p.bold {
   font-weight: 600;
}

not perfect but it does the job for me