title: Puppeteer - custom fonts not loading in pdf but do appear in screenshots
body: <p>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.</p>
  <p>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.</p>
  <p>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.</p>
  <ol>
  <li><p>How to get the custom fonts to show up in the pdf?</p>
  </li>
  <li><p>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?</p>
  </li>
  </ol>
  <p>Below is the code I am working with to create pdf.</p>
  <p>Puppeteer code:</p>
  <pre><code>const puppeteer = require('puppeteer');
  (async () =&gt; {
    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(() =&gt; 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();
  })();
  </code></pre>
  <p>Next.js: _app.js</p>
  <pre><code>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 (
      &lt;&gt;
        &lt;ThemeProvider theme ={{colors: colors.light, bp: bp}}&gt;
          &lt;GlobalStyle /&gt;
              &lt;Layout open={open} setOpen={setOpen}&gt;
                &lt;Component {...pageProps} /&gt;
              &lt;/Layout&gt;
        &lt;/ThemeProvider&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>Any help would be highly appreciated! Thanks!</p>