[BUG] Fonts seem to be broken since 122?

lewisl9029 commented 8 months ago

Environment

chromium Version: 121
playwright-core Version: 1.42.1
Node.js Version: 20.x
Lambda / GCF Runtime: nodejs20.x

Expected Behavior

I switched to a lambda layer with a fonts directory in it to get NotoColorEmoji working in 119.0.2. Upgrading to 122 should ideally result in the same font loading behavior.

Current Behavior

When I tried upgrading to 122, fonts seem to be completely broken. No emojis show up in any of our screenshots, and font rendering for regular text seems to have changed as well (looks like Open Sans isn't even getting loaded?).

Steps to Reproduce

I'm using a lambda layer with the following contents:

/fonts/NotoColorEmoji-Regular.ttf

No font calls in code.

Also tried .fonts directory and calling font in code with the font file packaged inside the lambda directly. No luck. Exact setup worked in 119.0.2, and 121 as well, but not 122.

Also, separate issue, I tried to upgrade to 123 as well, but context.newPage() calls in playwright end up timing out, so had to downgrade. Happy to open a separate issue for that if it'd be helpful. Cheers!

Possible Solution

Timing-wise, https://github.com/Sparticuz/chromium/commit/68f6d4858f991ddd977ca2c32463ebca3f766502 seems to be a likely culprit. I'm not sure how to inspect the contents of that file to figure out what changed though?

Sparticuz commented 7 months ago

dupe of #92

Sparticuz commented 7 months ago

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.

tsutorm commented 7 months ago

I had this problem too, but after moving the font file from /var/task/NotoSansJP-Black.otf to /var/task/fonts/NotoSansJP-Black.otf and changing the path referenced in await chromium.font() to the destination path After changing the file path to the destination path as well, the font is now displayed correctly.

The docker image was using public.ecr.aws/lambda/nodejs:18 .

hudsontavares commented 7 months ago

@Sparticuz @tsutorm - post-122 I named a folder folder fonts inside the Lambda Layer and it worked fine!

Neither chromium.font() nor a folder named .fonts (with a leading dot) in the Lambda Layer font worked anymore.

EDIT:

puppeteer: 22.5.0 (for local development)
@sparticuz/chromium: 122.0.0
puppeteer-core: 22.5.0
Node 18 (AWS-provided image on Lambda)

My puppeter.launch args are:

[
      ...chromium.args,
      '--font-render-hinting=none',
      '--force-color-profile=srgb',
      '--autoplay-policy=user-gesture-required',
      '--disable-background-networking',
      '--disable-background-timer-throttling',
      '--disable-backgrounding-occluded-windows',
      '--disable-breakpad',
      '--disable-client-side-phishing-detection',
      '--disable-component-update',
      '--disable-default-apps',
      '--disable-dev-shm-usage',
      '--disable-domain-reliability',
      '--disable-extensions',
      '--disable-features=AudioServiceOutOfProcess',
      '--disable-hang-monitor',
      '--disable-ipc-flooding-protection',
      '--disable-notifications',
      '--disable-offer-store-unmasked-wallet-cards',
      '--disable-popup-blocking',
      '--disable-print-preview',
      '--disable-prompt-on-repost',
      '--disable-renderer-backgrounding',
      '--disable-setuid-sandbox',
      '--disable-speech-api',
      '--disable-sync',
      '--hide-scrollbars',
      '--ignore-gpu-blacklist',
      '--metrics-recording-only',
      '--mute-audio',
      '--no-default-browser-check',
      '--no-first-run',
      '--no-pings',
      '--no-sandbox',
      '--no-zygote',
      '--password-store=basic',
      '--use-gl=swiftshader',
      '--use-mock-keychain',
      '--enable-async-image-decoding',
]

gweiying commented 7 months ago

+1 , did what @hudsontavares mentioned to nest the font folders inside the Lambda layers and it worked out for me! Thanks for the tip 🙏

jlee512 commented 6 months ago

Thanks 🙏 to both @Sparticuz and all of those who have been providing their working configurations/suggestions it has been of great help.

I can add another usage scenario of @hudsontavares's simple change for fonts integrated using a lambda layer worked (https://github.com/Sparticuz/chromium/issues/243#issuecomment-2067026877).

Hopefully this is helpful to someone else.

Changing my lambda layers internal folder naming from .fonts to fonts (i.e. without the '.') allowed me to upversion puppeteer-core, @sparticuz/chromium and the lambda functions runtime to Node20.x.

Parameters

@sparticuz/chromium: 123.0.1
puppeteer-core: 22.7.1
NodeJS: 20.x (AWS-provided image on Lambda)
Deployed using Serverless Framework inside of AWS CodeBuild (Image: aws/codebuild/amazonlinux2-x86_64-standard:5.0, runtime-versions in buildspec: nodejs: 20).

activeliang commented 2 months ago

感谢🙏两位@Sparticuz所有提供工作配置/建议的人都提供了很大的帮助。

我可以添加其他使用场景@hudsontavares对使用 lambda 层集成的字体进行简单的更改有效（#243 (评论)）。

希望这对其他人有帮助。

将我的 lambda 层内部文件夹命名从 .fonts 更改为 fonts（即没有 '.'）允许我将 puppeteer-core、@sparticuz/chromium 和 lambda 函数运行时升级到 Node20.x。

參數

@sparticuz/chromium: 123.0.1

puppeteer 核心：22.7.1

NodeJS：20.x（Lambda 在 AWS 上提供的图像）

使用 AWS CodeBuild 内部的无服务器框架进行部署（图片：aws/codebuild/amazonlinux2-x86_64-standard:5.0，buildspec 中的运行时版本：nodejs: 20）。

thx~

Sparticuz / chromium