External Fonts Not Being Captured

[jonboone1]

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]

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

[cehidalgo]

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.

[ryanmarshallmc]

+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]

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: https://github.com/puppeteer/puppeteer/issues/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]

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!

[coleridge72]

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

[aforemny]

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]

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: 

[mvpmule]

We fixed the issue by adding:

await new Promise(resolve => setTimeout(resolve, 500));

Right before

return Promise.props(page.pdf(options))

in html-pdf-node/index.js (1.0.7)