search

alixaxel / chrome-aws-lambda

Chromium Binary for AWS Lambda and Google Cloud Functions
MIT License
3.21k stars 293 forks source link

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

Open Joebayld opened 4 years ago

Joebayld commented 4 years ago

Environment

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?

Joebayld commented 4 years ago

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

mohamad-agha commented 4 years ago

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.

QAnders commented 3 years ago

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

dejwid commented 3 years ago

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

dejwid commented 3 years ago

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

classicboy commented 3 years ago

Any update ?

lauridskern commented 3 years ago

any updates?

sezeresim commented 3 years ago

Any update ?

QAnders commented 3 years ago

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

AlejandroMI commented 3 years ago

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

Hey @dejwid have you found a solution for this?