CODEWITHSUNDEEP
javascriptnode.jsnext.jspuppeteer
Dharmi
Dharmi

Reputation: 73

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

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!

Upvotes: 7

Views: 9082

Answers (3)

Foxlab
Foxlab

Reputation: 932

To prevent fonts with absolute url to be blocked on load, I used the "node_modules/cors" and added '--disable-web-security' into puppeteer.launch args like this :

    const browser = await puppeteer.launch({
    args: [
        '--no-sandbox',
        '--disable-web-security'
    ]
});

It did the trick for me, hope it'll help.

Upvotes: 5

Amir
Amir

Reputation: 1047

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)

Upvotes: 0

Manohar Reddy Poreddy
Manohar Reddy Poreddy

Reputation: 27485

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

Upvotes: 4

Related Questions