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!