Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:10

Top GitHub Comments

2reactions

dejwidcommented, Apr 1, 2021

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

0reactions

AlejandroMIcommented, Oct 20, 2021