Trouble Implementing Custom Typeface in Firebase Function with Puppeteer

Other Questions Puppeteer
1

Hey folks, I’m having a hard time with my Firebase Function. I’m trying to use Puppeteer to grab a webpage and slap a custom font on it. But it’s not working out.

Here’s what I’m doing:

async function webScraper(targetUrl) {
  let webBrowser;
  try {
    webBrowser = await puppeteer.launch({
      args: ['--no-sandbox'],
      executablePath: await chromium.executablePath,
      headless: chromium.headless
    });
    const webPage = await webBrowser.newPage();
    await webPage.setUserAgent('Mozilla/5.0 (Android 11; Mobile)');
    await webPage.setViewport({ width: 400, height: 800, scale: 3 });
    await webPage.goto(targetUrl);
    await webPage.waitForTimeout(3000);

    // Add custom font
    const fontFile = fs.readFileSync('./fonts/CustomFont.ttf');
    const fontB64 = fontFile.toString('base64');
    const fontUrl = `data:font/ttf;base64,${fontB64}`;
    await webPage.addStyleTag({
      content: `
        @font-face { font-family: 'CustomFont'; src: url(${fontUrl}); }
        * { font-family: 'CustomFont' !important; }
      `
    });

    await webPage.screenshot({ path: 'result.png' });
  } catch (err) {
    console.error('Scraping failed:', err);
  } finally {
    if (webBrowser) await webBrowser.close();
  }
}

The problem is, the custom font just won’t show up. I’ve tried a bunch of things like using Google Fonts, adding some security flags, and even injecting the styles manually. But nada.

Is there something about Firebase Functions that makes custom fonts a no-go with Puppeteer? Any other tricks I could try? Maybe Firebase is missing some font stuff?

Help a coder out! Thanks!

2

As someone who’s battled with custom fonts in serverless environments, I feel your pain. One trick that worked wonders for me was preloading the font. Try adding this right after you inject the font styles:

await page.evaluate(() => {
const link = document.createElement(‘link’);
link.rel = ‘preload’;
link.as = ‘font’;
link.href = ‘data:font/ttf;base64,…’; // Your base64 font data
link.crossOrigin = ‘anonymous’;
document.head.appendChild(link);
});

Also, double-check your font file path. In Firebase Functions, it should be relative to your function’s root, like ‘./fonts/CustomFont.ttf’.

If all else fails, you might need to use a font-loading library like FontFace API or WebFontLoader. They can handle the heavy lifting of ensuring the font is loaded before rendering.

Lastly, have you considered using a CDN-hosted web font instead? It might be more reliable in a serverless setup. Good luck!

3

I encountered a similar issue when working with Puppeteer in a serverless environment. The problem likely stems from the fact that Firebase Functions run in a sandboxed environment without access to system fonts.

To resolve this, I’d suggest bundling the font file with your function code and using a base64-encoded data URI, as you’ve attempted. However, ensure the font file path is correct relative to your function’s root directory.

Additionally, try adding a timeout after injecting the font to allow it to load:

await page.evaluate(() => {
  return new Promise(resolve => {
    setTimeout(resolve, 1000);
  });
});

If that doesn’t work, consider using a web-safe font as a fallback. Remember, rendering might differ slightly between local and cloud environments due to system variations.

4

yo, had similar headaches. try this: instead of fs.readFileSync, use require(‘fs’).promises.readFile. it’s async and plays nicer with firebase. also, make sure ur font path is spot on. if that don’t work, maybe try inlining the base64 font data directly? less moving parts. good luck mate!