[Bug]: Font kerning and font weight problems

[nsbarsukov]

Version

1.44.0

Steps to reproduce

Use our repository of Open Source project – https://github.com/taiga-family/taiga-ui
Approximately 3 weeks ago (mid-April) our screenshot tests became too flaky.

The main problem – font rendering.
See some examples:

1. Sometimes it incorrectly applies the font-weight
   (probably, relates to [BUG] Incorrect font rendering by Webkit on Ubuntu #22429)
2. Flaky font-kerning
   (probably, relates to [Question] Font kerning in WebKit #20203)

More examples see in this PR:

• chore: demonstration of playwright issue taiga-family/taiga-ui#7419 (comment)

Expected behavior

Font renders in the same way for the same OS every time.

Actual behavior

Flaky render of fonts

Additional context

We've already:

1. Used auto-retried assertions to wait font:

export async function tuiWaitForFonts(page: Page): Promise<void> {
    await expect(async () => {
        expect(await page.evaluate(() => (document as any).fonts.size)).toBeGreaterThan(
            0,
        );
        expect(await page.evaluate(() => (document as any).fonts.ready)).toBeTruthy();
        expect(await page.evaluate(() => (document as any).fonts.status)).toBe('loaded');
    }).toPass({timeout: 30_000});
}

2. Mocked fonts

await page.route('https://fonts.gstatic.com/**/*.ttf', async route =>
        route.fulfill({path: `${__dirname}/../stubs/manrope-fonts.ttf`}),
);

3. Tried to revert to previous version of playwright (1.44.0 => 1.38.0)
   [WIP] chore(deps): another attempt to debug taiga-family/taiga-ui#7413

The problems still persist :(

Environment

System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (4) x64 AMD EPYC 7763 64-Core Processor
    Memory: 14.32 GB / 15.61 GB
    Container: Yes
Binaries:
    Node: 20.12.2 - /opt/hostedtoolcache/node/20.12.2/x64/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.5.0 - /opt/hostedtoolcache/node/20.12.2/x64/bin/npm
Languages:
    Bash: 5.1.16 - /usr/bin/bash

[mxschmitt]

Would it be possible to provide a more minimal reproduction which we can run locally?

Ideally without cloning/building the entire project.

Approximately 3 weeks ago (mid-April) our screenshot tests became too flaky.

Are you able to track it down which latest GitHub Action run was good and when it first started failing? Since from a quick look you are using package-lock.json - that doesn't seem like a Playwright bug, and the underlying host OS might have changed instead and causing these kind of issues.

[nsbarsukov]

Would it be possible to provide a more minimal reproduction

Unfortunately, it's the most minimum reproduction I have at the present time :(
I will continue my attempts to detect reason of these issues – I will write about any updates.

[nsbarsukov]

We've tried to switch browser (Chrome => Firefox):

• [WIP] chore(demo-playwright): use Firefox as temporary workaround for unstable Chromium tests taiga-family/taiga-ui#7424

The problem still persists((

---

(see letter f in the word textfield)

[waterplea]

@mxschmitt I realize it's hard to track, but we've tried a few wild shots before creating this issue ourselves and we're very confused. We have a huge UI components library and we were relying on hundreds of screenshot tests for years. We migrated from Cypress to Playwright several months ago and everything was going great, we have dependabot configured and keep everything up to date and suddenly everything broke down with no apparent trackable reason. We've created this issue not to blame Playwright but to ask for help and assistance because we're out of ideas why could this happen at all. Maybe you have some thoughts on directions for us to explore? It's very confusing how can it be that same screenshots are ran on one code and on another that hasn't really changed at all and fonts rendering is totally off. We tried rolling back Playwright, tried rolling back chromium version, tried switching to Firefox and no luck.

[mxschmitt]

I'll close the issue for now, since we have not enough information to act on it. In theory, browser screenshots should be reproducible, if they get created on the same Host (os/arch/version) and the DOM is stable.

I recommend looking at build pipeline logs, maybe that will yield something, maybe the underlying OS version has changed etc.

Feel free to re-file if you found out more and have evidence that its a bug on Playwright side. Thanks for understanding.

[waterplea]

Were about to close it ourselves 🙂 we figured it out — seems like for some reason critical CSS and fonts inlining in Angular worked differently in 2 environments being compared and we ended up loading woff font in one case and ttf in another which rendered slightly differently. We mocked both paths for testing and it stabilized. Maybe it would be helpful to anyone else who will face a similar issue.

[StanislavGrishaev]

We mocked both paths for testing and it stabilized.

@waterplea hi there, I have a fairly similar problem on one of the projects, can you please provide an example of the code (you can directly link to your repository) how did you do it?

[nsbarsukov]

@StanislavGrishaev Hi!

Add these lines to your custom goto utility:

await page.route('https://fonts.gstatic.com/**', async route =>
    route.fulfill({path: `${__dirname}/../stubs/manrope-fonts.ttf`}),
);

Explore our custom tuiGoto utility to get more details.

[StanislavGrishaev]

@nsbarsukov thanks, appreciate it !

[StanislavGrishaev]

@nsbarsukov I just want to make sure that the type of request you are replacing (https://fonts.gstatic.com/**) is a fetch/document request? Because I’m trying to replace fonts in my project and I see in dev tools that their request type is fonts (on screenshot), I have a suspicion that in this case route.fulfill does not work (because I don’t see any changes on the page when replacing, even if i try route.abort() for my fonts route) , but I don’t sure...

[nsbarsukov]

@nsbarsukov I just want to make sure that the type of request you are replacing (https://fonts.gstatic.com/**) is a fetch/document request? Because I’m trying to replace fonts in my project and I see in dev tools that their request type is fonts (on screenshot), I have a suspicion that in this case route.fulfill does not work (because I don’t see any changes on the page when replacing, even if i try route.abort() for my fonts route) , but I don’t sure...

Use playwright UI mode (not browser dev tools) to check it:
https://playwright.dev/docs/test-ui-mode#network

As for my case, it works – see body's decscription of the following PR:

• chore(demo-playwright): tuiGoto should mock both .ttf and .woff2 fonts taiga-family/taiga-ui#7451