mrafiqk/html-pdf-node

External Fonts Not Being Captured

Opened this issue · 8 comments

jonboone1 commented

I've been digging into this issue tonight and believe I have found the source of the issue. I am trying to load external fonts from Google Fonts, and when I preview the html I can see the font is working fine. However, when I print to pdf, the font is not being used. I believe what is happening is that Chromium is printing the page before the font gets loaded and used. I would like to request some sort of option to set where I delay chromium by x seconds to load the page before priting to PDF.

rodrigonoguti commented

Same problem here, even by using base64 as a source.

  • 👍1
cehidalgo commented

I think there's an issue with loading external assets on the version 1.0.8.
What we did to fix this was downgrade the package version to the 1.0.7 and the external assets got back to being loaded normally.

  • 👍3
ryanmarshallmc commented

+1! I was not successful with google fonts either with a <link> or an @import, with both v1.0.7 and v1.0.8. Has anyone else had any success?

chriswait commented

I'm also struggling to load Google Fonts with a <link> or @import (on version 1.0.8)

Seems to be a known issue in Puppeteer: puppeteer/puppeteer#422. There were two suggestions from that thread that seemed to work for some people:

  • calling await page.focus('body') "Presumably this triggers a re-paint causing the fonts to appear correctly."
  • adding await page.evaluateHandle('document.fonts.ready');

I've tried adding these to this repo after the call to await page.setContent in index.js, but neither resolved it for me.

I also tried a 2 second wait using await new Promise(resolve => setTimeout(resolve, 2000)) as suggested here

sirmong commented

I think there's an issue with loading external assets on the version 1.0.8. What we did to fix this was downgrade the package version to the 1.0.7 and the external assets got back to being loaded normally.

Thank you! Helped a lot!

  • 👍1
coleridge72 commented

Any updates on this? Version 1.0.7 doesn't seem to work for me either

  • 😕1
aforemny commented

I can confirm that external fonts embedded via CSS @font-face and src being a data URL does not work with 1.0.8, but does work with 1.0.7.

JoseVov commented

I have an error when I use the version 1.0.7

error /xxxx/node_modules/puppeteer: Command failed.
Exit code: 1
Command: node install.js
Arguments: 
Directory: /xxxx/node_modules/puppeteer
Output:
The chromium binary is not available for arm64: