Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PDF rendering hangs unless page contains the same custom font as header

See original GitHub issue

Steps to reproduce

Tell us about your environment:

Puppeteer version: 7.0.1
Platform / OS version: macOS 11.1 (Big Sur)
Node.js version: 12.18.3

I initially got this problem in a Ruby app on Heroku (Ubuntu 16) using the grover gem which in turn used puppeteer 5.5.0, but I have repeated the issue and identified a smaller version of it using puppeteer directly on the environment described above.

What steps will reproduce the problem?

The following script is used to initialize Puppeteer and generate the PDF. It is a simplified version of the code used by grover.

const puppeteer = require("puppeteer");
const fs = require("fs");

const renderPDF = async (html, options) => {
  let browser;
  try {
    // Launch the browser and create a page
    browser = await puppeteer.launch({
      args: ["--no-sandbox", "--disable-setuid-sandbox"],
    });
    const page = await browser.newPage();

    // Request is some HTML content. Use request interception to assign the body
    await page.setRequestInterception(true);
    page.once("request", (request) => {
      request.respond({ body: html });
      // Reset the request interception
      // (we only want to intercept the first request - ie our HTML)
      page.on("request", (request) => request.continue());
    });

    await page.goto("http://example.com", { waitUntil: "networkidle0" });

    return await page.pdf({
      path: options.path,
      displayHeaderFooter: true,
      headerTemplate: options.headerTemplate,
      footerTemplate: "<html><head></head><body></body></html>",
      margin: { top: "2.9cm", bottom: "2.5cm", left: "1cm", right: "1cm" },
    });
  } finally {
    if (browser) {
      await browser.close();
    }
  }
};

The following is the HTML used for the page content (I have shortened the data URLs for readability).

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
      @font-face {
        font-family: MyCustomFont;
        src: url(data:application/font-woff2;base64,d09GMgABAAAAAGhkABEAAAABG8gAA...)
          format("woff2");
        font-weight: 300;
      }

      @font-face {
        font-family: MyCustomFont;
        src: url(data:application/font-woff2;base64,d09GMgABAAAAAGvgABEAAAABKOwA...)
          format("woff2");
        font-weight: 500;
      }

      body {
        font-family: "MyCustomFont";
        font-weight: 300;
      }

      h1 {
        font-weight: 500;
      }
    </style>
  </head>
  <body>
    <section>This is the rendered page.</section>
  </body>
</html>

And this is the HTML used as header. The contents of the style tag is identical to that of the rendered content above, but truncated for readability.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
    ...
    </style>
  </head>
  <body>
    <h1>TEXT</h1>
  </body>
</html>

What is the expected result? A generated PDF with a header with the text “TEXT” in bold, and a page containing the text “This is the rendered page.”

What happens instead? Nothing. The process seems to hang and never completes.

Troubleshooting If I remove the custom font and use a font installed on the current system, everything works fine. It therefore seems reasonable to assume that the custom font is what causes the problem.

I have also found a workaround for the issue, which might be of some help in tracking down the cause of it. It turns out that if I change the body of the content to the HTML below, I can successfully generate the PDF:

    <div style="font-weight: 300;">&nbsp;</div>
    <div style="font-weight: 500;">&nbsp;</div>
    <section>This is the rendered page.</section>

This workaround seems to be very much in line to the one described at https://github.com/puppeteer/puppeteer/issues/422#issuecomment-759424240, which is also an issue regarding custom fonts.

It seems as if the header fonts are not properly loaded unless they are also loaded in the body, which seems like a bug to me.

Let me know if I can help with any additional troubleshooting!