Puppeteer - custom fonts not loading in pdf but do appear in screenshots

Question

I am trying create PDF files dynamically using the puppeteer lib but the pdf that is generated doesn't use the custom fonts (.woff) instead uses default system font i.e. Times new roman.

I used Next.js to create the website and did rather a tricky setup to load custom fonts along side styled-components. Best if I didn't have to mess with the Nextjs setup but then whatever gets it to work.

I even added a delay (timeout) just to make sure that the fonts are properly downloaded before generating the pdf but in vain. However taking screenshots shows the correct custom fonts.

1. How to get the custom fonts to show up in the pdf?

2. generating pdf causes background colours to appear behind some divs, how do I debug that or what's could be the issue there as no such background colours appear behind images on the webpage/screenshot?

Below is the code I am working with to create pdf.

Puppeteer code:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({headless: true});
  const page = await browser.newPage();
  await page.goto('https://threads-web.vercel.app/threads/1385978750743973894', {
    waitUntil: 'networkidle2',
  });
  // const document = await page.evaluate(() => document);
  // console.log(document.fonts) ----- This also returns undefined
  try {
    await page.screenshot({ path: 'beforeTimeout.png' });
    await page.waitForTimeout(15000);
    await page.screenshot({ path: 'afterTimeOut.png' });
    await page.evaluateHandle('document.fonts.ready');
    await page.pdf({ path: 'hn.pdf', format: 'a4' });
  }
  catch (err) {
      console.log(err)
  }

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

Next.js: _app.js

const GlobalStyle = createGlobalStyle`
    @font-face {
    font-family: 'ProximaNova-Regular';
    src: url('/fonts/ProximaNova-Regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: 'ProximaNova-Bold';
    src: url('/fonts/ProximaNova-Bold.woff') format('woff');
    font-style: bold;
    font-weight: 700;
    font-display: swap;
  }
`;
function MyApp({ Component, pageProps }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <ThemeProvider theme ={{colors: colors.light, bp: bp}}>
        <GlobalStyle />
            <Layout open={open} setOpen={setOpen}>
              <Component {...pageProps} />
            </Layout>
      </ThemeProvider>
    </>
  );
}

Any help would be highly appreciated! Thanks!

Answer 1

File: face.css

@font-face {
    font-family: "MyFontRegular";
    src: url("data:font/ttf;base64,--fontInBase64FontHere--");
}

NOTE: "--fontInBase64FontHere--" in above is any font like true type font, take that data & convert to base64 format using any online tool. It is also same as Buffer.from("FontFileDataHere").toString('base64') if you need to dynamic, but static converted is faster.

File: main.js

import myFont from "./face.css";

const html = `
    <style>
        ${myFont}
    </style>

    <div style="font-family: MyFontRegular">
        Welcome to Ben's Minecraft
    </div>
`;

// convert "html" to pdf code here

Answer 2

There are multiple issues on puppeteer GitHub about this issue, what currently worked for me was changing the puppeteer product to firefox. I have not tried other solutions yet.

issue1 (closed)

issue2 (currently open)