[BUG] System fonts are not loaded

[Peque]

I just migrated:

• From @sparticuz/chrome-aws-lambda (latest available version 17.1.3)
• To @Sparticuz/chromium (latest available 19.8.0 with Chrome 112.0.2).

Before, I was able to install the fonts system-wide in the Dockerfile with apt-get install fonts-roboto fonts-open-sans fonts-liberation, and they were automatically and successfully loaded by Chromium. After the migration, however, the fonts seem not to be loaded.

Is there any identified reason why this is happening or any suggestion on how to fix it?

I'm not using this (nor I was using it) in AWS, but rather in Google Cloud Run, so #33 does not seem to help.

BTW: Loading with await chromium.font() cannot be used since is not a solution for headers/footers.

[aldenquimby]

@Peque my team loads fonts as base64 encoded data to get around the header/footer issue:

@font-face {
  font-weight: 400;
  font-family: 'Nunito Sans';
  font-style: normal;
  src: url('data:application/x-font-woff;charset=utf-8;base64,BASE64_BLOB_HERE') format('woff2');
  font-display: swap;
}

This has worked for us for years and still works on the latest @sparticuz/chromium version

[Peque]

@aldenquimby Thanks for sharing your workaround. 😊

It would still be great to be able to load them from the system as with @sparticuz/chrome-aws-lambda (and as with any non-headless browser). This way you can use common fonts like Roboto and Open Sans without having to load multiple individual blobs "by hand" and without having to declare them once for the signature and another once for the actual web content.

[Sparticuz]

I'm not sure. I think the only thing I've done relating to the font()'s function was disable the use of http to fetch the font. If you are installing the fonts before running chromium, I would think they would just work, I've not used gcr though.

[Peque]

@Sparticuz Should be easy to reproduce locally with Docker/Podman (no need to use GCP).

If needed, I could provide a minimal source code to reproduce the issue. 😊

[NazmusSayad]

My web fonts not working...
Is it just for me or for everyone?

[NazmusSayad]

My web fonts not working...
Is it just for me or for everyone?

It was my fault.
Nevermind 😺😺

[hirasso]

@NazmusSayad care to share what was working incorrectly?

[NazmusSayad]

@NazmusSayad care to share what was working incorrectly?

My web fonts not working...
Is it just for me or for everyone?

It was my fault. Nevermind 😺😺

[vkozyrev]

I got webfonts working by adding chromium.args.concat(['--font-render-hinting=none']) to options.

See puppeteer/puppeteer#2410 (comment)

[Peque]

@Sparticuz I am eager to try the v122 release when available if it fixes this issue! 🥳 😊

PS: Is there any estimated release date or not yet?

[Sparticuz]

@Sparticuz I am eager to try the v122 release when available if it fixes this issue! 🥳 😊

PS: Is there any estimated release date or not yet?

A few minutes

[Sparticuz]

Should be live now

[Peque]

@Sparticuz Thanks! I tried it but unfortunately without success for my use case. I try to create a minimum reproducible case before reporting/reopening. 😊

[Sparticuz]

What OS is your dockerfile starting from? Do you know where the fonts are stored?

/var/task/.fonts
/var/task/fonts
/opt/fonts
/tmp/fonts

This should be where fonts are coming from, though the only thing I've done since the old days was add in /var/task/fonts.

[Peque]

@Sparticuz Simplifying things up I managed to load fonts successfully. So I think this issue can be closed! 🚀 😊

I now need to figure out why pageNumber and totalPages stopped working in footers. 😄

[isubasti]

@Sparticuz it looks like this is still an issue for fonts from external URL. chromium.font() put the downloaded font to ${process.env["HOME"]}/.fonts but doesn't seem to be used by chrome instance. I've had to symlinked ${process.env["HOME"]}/.fonts to /tmp/fonts to make it to work

[kiostudio]

For those who are still struggling with the font issue, here's my solution :

1. Download the custom font to /tmp/fonts folder during the lambda runtime
2. use chromium.font to include the font when the chrome instance run

Some of the code snippet :

await fsPromise.mkdir(`/tmp/fonts`, { recursive: true });
await fsPromise.writeFile(`/tmp/fonts/HanaMinA.ttf`, await downloadFile.buffer());
await fsPromise.writeFile(`/tmp/fonts/HanaMinB.ttf`, await downloadFile2.buffer());
await chromium.font('/tmp/fonts/HanaMinA.ttf');
await chromium.font('/tmp/fonts/HanaMinB.ttf');