Custom Fonts not loaded when pdf generated #3183

KrifaYounes · 2018-09-04T10:01:24Z

I try to generate a PDF with custom font but it doesn't work when I inject fonts like this :

import { injectGlobal } from 'styled-components'
import Book from './assets/fonts/718/sevenoneeight-medium.woff2';
import Book2 from './assets/fonts/718/sevenoneeight-medium.woff';

injectGlobal `
@font-face {
	font-family: "718book";
	src: url(${Book}) format("woff2"),
		url(${Book2}) format("woff");
}

body {
  font-family: '718book';
  -webkit-print-color-adjust: exact;
}
`;

Someone have an idea how to import fonts correclty ?
I need a solution that works with any url -> http://localhost:3000, http://xxxxx.com ....

It works when I generated a fonts folder in my build and I inject fonts like this :


injectGlobal `
@font-face {
	font-family: "718book";
	src: url('http://localhost:3000/fonts/718/sevenoneeight-medium.woff2') format("woff2"),
		url('http://localhost:3000/fonts/718/sevenoneeight-medium.woff') format("woff");
}
`;

I convert my html to pdf like this :

let convertHTMLToPDF = async (html, callback, options = null) => {
    if (typeof html !== 'string') {
        throw new Error('xxxx.');
    }
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setRequestInterception(true);

    page.once('request', request => {
        request.respond({ body: html });
        page.on('request', request => request.continue());
    });

    const response = await page.goto('https://google.com');
    await page.setContent((await response.buffer()).toString('utf8'));
    await page.evaluateHandle('document.fonts.ready');
    await page.pdf(options).then(callback, function(error) {
        console.log(error);
    });
    await browser.close();
};

The text was updated successfully, but these errors were encountered:

krokofant · 2019-02-28T19:05:38Z

If you intend to use this only for pdf then maybe you could base64 encode the font and load it via url.

AlaaHamoudah · 2019-09-30T10:27:08Z

I ams still facing this issue, @aslushnikov do you have any suggestions?

lovenick · 2019-10-30T15:46:19Z

Not sure if you've seen #422 , but it might be relevant to your issue.

shibli786 · 2019-11-02T14:59:27Z

I also facing the same issue. I have attached the PDf file generated from Puppeteer.
However, in my case I am using all my custom fonts base64 encoded.
The page is rendered properly in chrome, chromium and also I tested headless: false, in all these case pages is rendered fine.
But in headless: true all font is missing.
hn.pdf

@font-face
{
font-family:ffc;
src:url('data:application/font-woff;base64,d09....)format("woff");
}

.ffc{font-family:ffc;line-height:1.589369;font-style:normal;
font-weight:normal;
visibility:visible;
}

haan123 · 2020-03-22T10:47:26Z

Hi @shibli786,

I have found a work around, it seem like the font need to be rendered as lead one time, so i have create a dummy div right after body tag to render that font, e.g,

<body>
<div class="__dump ff36">_</div>
...
</body>

See my real code here:

const rfont = /@font-face.*font-family:([^;]+)/g;

function prepareContent(html) {
  const $ = cheerio.load(html);
  const $body = $('body');
  const $style = $('style');
  const fonts = [];

  $style.each((_, elem) => {
    const $this = $(elem);

    $this.html().replace(rfont, (_, font) => fonts.push(font));
  });

  fonts.forEach((font) => {
    $body.prepend(`<div class="__dump ${font}">_</div>`);
  });

  return $.html();
}

(async () => {
  html = prepareContent(html);

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // await page.goto(`file:${path.join(__dirname, 'books/Computer Programming with C++/1 - Introduction.html')}`, {
  await page.setContent(html);
  await page.evaluateHandle('document.fonts.ready');
  await page.evaluate(() => {
    var dumps = document.querySelectorAll('.__dump');
    dumps.forEach((dump) => dump.parentNode.removeChild(dump));
})
  await page.pdf({path: 'hn.pdf', format: 'A4'});

  await browser.close();
})();

sorkhemiri · 2020-04-27T07:43:41Z

i had the same issue. i finally ended up using fonts served in directory on public URL as CDN and it works fine for me right now.

elrumordelaluz · 2020-05-29T08:28:17Z

I'll expose my tests in case is useful for anyone to continue debug or to find a better solution:

I am generating a pdf from an html string. Something like:

await page.goto(`data:text/html,${htmlString)}`, { waitUntil: 'networkidle0' })
const pdf = await page.pdf()

Since the html string uses an external font I tried different options that I'll describe below. However only the last one works without differences on two environments.
I am testing in local using OSX and in an external server using Linux.
Here are the different options I tried:

Adding @import url('https://fonts.googleapis.com/css2?family=…'); into a <style> tag of the html string passed
Passing that url as addStyleTag url
Serving the web fonts and stylesheet in the same server where puppeteer is working and passing a addStyleTag path
Also tried playing with await page.evaluateHandle('document.fonts.ready') and another waitUntil values.

In all those scenarios, the resulting pdf were generated with the wrong font and using different fallback, since are different operating systems.

The solution that works cross platform is to pass this css declaration inside the html string:

@font-face {
      font-family: 'Inconsolata';
      src: url(data:application/font-woff2;charset=utf-8;base64,…),
         url(data:application/font-woff;charset=utf-8;base64,…);
      font-weight: normal;
      font-style: normal;
}

I hope there are better solutions since the base64 string for only one style of a font family is pretty big, and increases in cases where more styles or families are needed in the same page.

billyvg · 2020-08-19T23:45:43Z

@elrumordelaluz Have you tried the above with page.setContent instead of page.goto?

616b2f · 2021-03-15T07:59:46Z

@elrumordelaluz @billyvg What worked for us is to wait till the font's are actually loaded before you create your pdf file, using this command:

await page.evaluateHandle('document.fonts.ready');

This seems the best solution so far. As you can use custom fonts that are registered system wide and do not need to load them as base64 strings.

All credits go to this post: #422 (comment)

EDIT: Important to note that we are using custom fonts that are imported system wide and NOT inline as base64 encoded.

thomasdvd · 2021-11-19T08:15:02Z

I have tried some of the solutions above but none of them hold up when generating 30+ pdfs

so i ended up doing this

try {
	await page.goto(url, { waitUntil: 'load', timeout: 5 * 1000 });
} catch {
	await page.goto(url, { waitUntil: 'networkidle2', timeout: 15 * 1000 });
}

giving puppetteer some room to breath between opening pages also seems to help , as I had very inconsistent results

wakproductions · 2022-02-07T00:15:29Z

None of the above solutions to fix the loading issues worked for me. I've done the base 64 encoding and the time delay hacks. The page and its custom fonts render fine through the web browser, but show up blank in the PDF. What worked for me what installing the font in the OS as a system font and then referencing it by name in the style sheet. For my Linux instance, and in Docker, copying the TTF file into /usr/share/fonts/truetype resolved the font anomalies in PDF generation.

ahmafi · 2022-05-03T16:54:40Z

I have the same issue currently, and It's probably not a network-related issue, because the fonts are loaded, I can see the correct fonts when I take a screenshot exactly before generating the PDF, but the fonts are not loaded in PDF for some reason.

For now, changing the puppeteer product to firefox fixed this issue.

stale · 2022-07-02T18:11:10Z

We're marking this issue as unconfirmed because it has not had recent activity and we weren't able to confirm it yet. It will be closed if no further activity occurs within the next 30 days.

alexgrinseit · 2022-07-30T05:35:11Z

We also noticed that web fonts sometimes don't render in PDFs created with Puppeteer 14.3.0 and Node 12.22.8

piyushk96 · 2022-08-04T15:30:51Z

you can try this alixaxel/chrome-aws-lambda#246 (comment). This worked for me

stevecj · 2022-08-17T21:49:12Z

I have tried some of the solutions above but none of them hold up when generating 30+ pdfs

so i ended up doing this
try {
	await page.goto(url, { waitUntil: 'load', timeout: 5 * 1000 });
} catch {
	await page.goto(url, { waitUntil: 'networkidle2', timeout: 15 * 1000 });
}
giving puppetteer some room to breath between opening pages also seems to help , as I had very inconsistent results

I don't know yet whether it will work in all cases, but this is the first thing that worked for me.

Can you say more about what this does? It looks to me like it does not actually add a time delay. It just waits for load instead of for networkidle2. Is that right? Since others have said this doesn't help them, would it help to add an actual sleep as well, and how should that be done?

stevecj · 2022-08-17T22:43:48Z

I have tried some of the solutions above but none of them hold up when generating 30+ pdfs
so i ended up doing this
try {
	await page.goto(url, { waitUntil: 'load', timeout: 5 * 1000 });
} catch {
	await page.goto(url, { waitUntil: 'networkidle2', timeout: 15 * 1000 });
}
giving puppetteer some room to breath between opening pages also seems to help , as I had very inconsistent results
I don't know yet whether it will work in all cases, but this is the first thing that worked for me.

Can you say more about what this does? It looks to me like it does not actually add a time delay. It just waits for load instead of for networkidle2. Is that right? Since others have said this doesn't help them, would it help to add an actual sleep as well, and how should that be done?

It turns out that only worked for me on the first try. :( I tried adding a sleep afterward (await page.evaluate('new Promise(resolve => setTimeout(resolve, 1000));'); and that also didn't help.

None of the advice here is working for me. I also tried generating a screenshot first, etc.

evmer · 2022-09-07T14:03:06Z

In some cases this is a bug related to the Access-Control-Allow-Origin limitations.

If you trust the url source, adding --disable-web-security fixes the issue.

aneuwald · 2022-11-30T11:22:30Z

In some cases this is a bug related to the Access-Control-Allow-Origin limitations.

If you trust the url source, adding --disable-web-security fixes the issue.

Worked like a charm! Thansk @evmer !

kkarkos · 2023-05-19T02:11:26Z

Try await page.waitForFunction('document.fonts.ready');

skerit · 2023-11-05T11:55:28Z

The only thing that worked for me was base64 inlining the fonts.

mariusrak · 2023-11-06T15:31:18Z

Try await page.waitForFunction('document.fonts.ready');

I tried this and my webfonts do not appear. If I use waitUntil: "networkidle0" they work correctly. But it adds 500ms, which I don't like. So is there a way to make use of the document.fonts.ready?
Thanks.

mariusrak · 2023-11-06T15:36:11Z

I used waitUntil: "load" and then await page.waitForFunction('document.fonts.ready'); and it works correctly. But I shaved off only like 50ms :D

gabrielmicko · 2024-01-04T19:20:51Z

await page.evaluateHandle('document.fonts.ready'); did the trick for me, thank you.

#3183

aslushnikov added the chromium Issues with Puppeteer-Chromium label Dec 6, 2018

frinyvonnick mentioned this issue Sep 21, 2020

Issue in using a custom ttf font within an express app frinyvonnick/node-html-to-image#55

Closed

stale bot added the unconfirmed label Jul 2, 2022

stale bot removed the unconfirmed label Jul 30, 2022

OrKoN added bug confirmed labels Sep 6, 2022

OrKoN self-assigned this Mar 21, 2024

OrKoN added the P3 label Mar 21, 2024

OrKoN added a commit that referenced this issue Mar 29, 2024

fix: wait for fonts before pdf printing

d3d1edd

#3183

OrKoN mentioned this issue Mar 29, 2024

fix: wait for fonts before pdf printing #12175

Merged

OrKoN added a commit that referenced this issue Apr 2, 2024

fix: wait for fonts before pdf printing

5932a9f

#3183

OrKoN added a commit that referenced this issue Apr 2, 2024

fix: wait for fonts before pdf printing

0de168f

#3183

OrKoN closed this as completed in #12175 Apr 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom Fonts not loaded when pdf generated #3183

Custom Fonts not loaded when pdf generated #3183

KrifaYounes commented Sep 4, 2018 •

edited

krokofant commented Feb 28, 2019

AlaaHamoudah commented Sep 30, 2019

lovenick commented Oct 30, 2019

shibli786 commented Nov 2, 2019

haan123 commented Mar 22, 2020

sorkhemiri commented Apr 27, 2020

elrumordelaluz commented May 29, 2020

billyvg commented Aug 19, 2020

616b2f commented Mar 15, 2021 •

edited

thomasdvd commented Nov 19, 2021

wakproductions commented Feb 7, 2022

ahmafi commented May 3, 2022

stale bot commented Jul 2, 2022

alexgrinseit commented Jul 30, 2022 •

edited

piyushk96 commented Aug 4, 2022 •

edited

stevecj commented Aug 17, 2022

stevecj commented Aug 17, 2022 •

edited

evmer commented Sep 7, 2022

aneuwald commented Nov 30, 2022

kkarkos commented May 19, 2023

skerit commented Nov 5, 2023

mariusrak commented Nov 6, 2023

mariusrak commented Nov 6, 2023

gabrielmicko commented Jan 4, 2024

Custom Fonts not loaded when pdf generated #3183

Custom Fonts not loaded when pdf generated #3183

Comments

KrifaYounes commented Sep 4, 2018 • edited

krokofant commented Feb 28, 2019

AlaaHamoudah commented Sep 30, 2019

lovenick commented Oct 30, 2019

shibli786 commented Nov 2, 2019

haan123 commented Mar 22, 2020

sorkhemiri commented Apr 27, 2020

elrumordelaluz commented May 29, 2020

billyvg commented Aug 19, 2020

616b2f commented Mar 15, 2021 • edited

thomasdvd commented Nov 19, 2021

wakproductions commented Feb 7, 2022

ahmafi commented May 3, 2022

stale bot commented Jul 2, 2022

alexgrinseit commented Jul 30, 2022 • edited

piyushk96 commented Aug 4, 2022 • edited

stevecj commented Aug 17, 2022

stevecj commented Aug 17, 2022 • edited

evmer commented Sep 7, 2022

aneuwald commented Nov 30, 2022

kkarkos commented May 19, 2023

skerit commented Nov 5, 2023

mariusrak commented Nov 6, 2023

mariusrak commented Nov 6, 2023

gabrielmicko commented Jan 4, 2024

KrifaYounes commented Sep 4, 2018 •

edited

616b2f commented Mar 15, 2021 •

edited

alexgrinseit commented Jul 30, 2022 •

edited

piyushk96 commented Aug 4, 2022 •

edited

stevecj commented Aug 17, 2022 •

edited