Hey folks! I’m stuck with a tricky problem. I’m working on a project that uses puppeteer-core and chrome-aws-lambda within a Firebase Cloud Function to scrape a webpage and apply a custom font. Oddly enough, when I inject the custom font using page.addStyleTag, it doesn’t show up in the final screenshot. I tried using page.evaluate(), switching between a local font and a Google-hosted one, and even launched Puppeteer with --disable-web-security, but nothing made a difference. Is there a known limitation in Firebase Functions with custom fonts, or is there another strategy I should try? Any ideas or suggestions would be greatly appreciated!
I’ve faced a similar issue with Puppeteer and custom fonts in a cloud environment. One solution that worked for me was to load the font file directly into the browser context using page.setContent(). Here’s what I did:
Convert your font file to a base64 string. Create an HTML template with the base64 font embedded in a style tag. Use page.setContent() to load this HTML before navigating to your target URL.
This approach ensures the font is available in the browser context. Also, make sure you’re giving enough time for the font to load before taking the screenshot. You might want to add a small delay or wait for a specific element to be visible.
If this doesn’t work, you could try using a headless browser that supports custom fonts out of the box, like Playwright. It has better font handling in my experience.
Have you considered using a font preloading technique? This approach can be particularly effective in cloud environments. Try adding a tag for your custom font in the HTML head before Puppeteer renders the page. This instructs the browser to fetch the font file early in the loading process.
Another potential solution is to use CSS font-display: swap. This property allows text to be rendered with a system font initially, then swapped with your custom font once it’s loaded. This might help ensure the font is applied before the screenshot is taken.
If these don’t work, you might need to dig deeper into Firebase Functions’ execution environment. There could be limitations or configurations specific to Firebase that are affecting font rendering. Consider reaching out to Firebase support for more detailed insights into their Puppeteer implementation.
hve u tried using a web font instead? Sometimes local fonts can be tricky in cloud environments. you could try loading a font from Google Fonts or another CDN. Also, make sure ur giving enough time for the font to load before taking the screenshot. maybe add a small delay or wait for a specific element to be visible before capturing.