chrome-aws-lambda
chrome-aws-lambda copied to clipboard
alixaxel
[BUG] Can't get custom font to load on Google Function
Environment
-
chrome-aws-lambdaVersion: 5.2.1 -
puppeteer/puppeteer-coreVersion: 5.2.1 - OS:
- Node.js Version: 10
- Lambda / GCF Runtime: 10
Expected Behavior
The custom google font should load on my page as it's rendered to PDF.
I'm having a hard time using the font function to load a custom font. I'm using Google firebase functions.
Here's my server code:
await chromium.font('https://fonts.googleapis.com/css2?family=Josefin+Sans');
const browser = await chromium.puppeteer.launch({
args: chromium.args,
defaultViewport: chromium.defaultViewport,
executablePath: (config.app && config.app.firebase_chromium_exe_path) || await chromium.executablePath,
headless: chromium.headless,
ignoreHTTPSErrors: true,
});
const page = await browser.newPage();
await page.setContent(data);
const pdfBuffer = await page.pdf({ printBackground: true });
res.set("Content-Type", "application/pdf");
res.status(200).send(pdfBuffer);
await browser.close();
data is pointing to a raw HTML file. For this example I'll use:
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-family: 'Josefin Sans';
font-size: 100px;
}
</style>
</head>
<body>
This should be in Roboto
</body>
</html>
Am I just doing something wrong? How exactly are we able to access the fonts that are pre-loaded?
Just an update here -
I realized that the css it's downloading isn't actually a font but a references to the font URLs. So I downloaded the fonts directly and tried importing them. await chromium.font('./Roboto-Regular.tt'); (using Roboto for this example). They still don't show up in the rendered PDF...
I have the exact same problem. I am trying to import the google font
await chromium.font('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap')
It doesn't render.
@mohamad-agha .font seems to work for me.
I have the exact same problem. I am trying to import the google font
await chromium.font('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap')It doesn't render.
await chromium.font('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap') will not work because it links to a css, and not a valid ttf font
Try like this: chromium.font('https://rawcdn.githack.com/openmaptiles/fonts/e1c6ea642b612abcbdd6e48fc2400162c1b531da/roboto/Roboto-Regular.ttf?raw=true')
I downloaded the .ttf files and added them to the repository with a fonts.conf file as I never got it loading from a URL and that worked...
However, we have since abandoned Puppeteer and moved to use PDFKit instead... Unfortunately much more complex "templating" but no more issues with large deployments, messed up dependencies (or fonts) and page-breaks etc. are so much easier to handle...
Nothing against chrome-aws-lambda!!! I really appreciate your efforts, guys, but as a "Production" setup it wasn't feasible for us anymore... :(
I have the same problem. It works on puppeteer locally but not on aws
Hey @dejwid have you found a solution for this?
