chrome-aws-lambda [BUG] Can't get custom font to load on Google Function

Environment

chrome-aws-lambda Version: 5.2.1
puppeteer / puppeteer-core Version: 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?

Sep 04 '20 11:09 Joebayld

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...

Sep 05 '20 11:09 Joebayld

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.

Oct 01 '20 21:10 mohamad-agha

Yep, me too and all font's becomes Open Sans it seems... Following!

Dec 18 '20 09:12 QAnders

I have the same problem. It works on puppeteer locally but not on aws

Mar 30 '21 14:03 dejwid

@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')

Apr 01 '21 10:04 dejwid

Any update ?

Jun 01 '21 02:06 classicboy

any updates?

Jun 28 '21 23:06 lauridskern

Any update ?

Sep 21 '21 18:09 sezeresim

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... :(

Sep 22 '21 06:09 QAnders

I have the same problem. It works on puppeteer locally but not on aws

Hey @dejwid have you found a solution for this?

Oct 20 '21 08:10 AlejandroMI

chrome-aws-lambda chrome-aws-lambda copied to clipboard

[BUG] Can't get custom font to load on Google Function

Environment

Expected Behavior

chrome-aws-lambda
chrome-aws-lambda copied to clipboard