[BUG] Incorrect font rendering by Webkit on Ubuntu

[pinanks]

System info

• Playwright Version: v1.32.3
• Operating System: 22.04.2 LTS (Jammy Jellyfish)
• Browser: WebKit
• Node.js Version: v18.15.0

Source code

• I provided exact source code that allows reproducing the issue locally.

app.js

const playwright = require('playwright');

async function captureScreenshot() {
    const options = {
        headless: true,
        viewport: { width: 1920, height: 1080 }
    }
    const browser = await playwright.webkit.launch(options);
    const context = await browser.newContext();
    const page = await context.newPage();
    
    await page.goto('https://fonts.google.com/specimen/Montserrat');
    await page.waitForLoadState('networkidle');
    await page.screenshot({path: `ss-headless-webkit-montserrat.png`, fullPage: true});
    await browser.close();
}

captureScreenshot();

Steps

• node app.js

Expected

Actual

Context

My use case is to capture screenshots on different browsers.

It works perfectly fine on my local setup (details given below) for all the browsers i.e chromium, firefox and webkit. But it doesn't work on Ubuntu specifically for webkit, works fine for chromium and firefox. (Ubuntu runs on the Docker image mcr.microsoft.com/playwright:v1.32.3-jammy. However, I also tried it on a live machine, it produces the same screenshots as the container)

The issue seems to be font rendering. Webkit on Ubuntu can't render different weights of the font

macOS (Local setup)

• Playwright Version: v1.32.3
• Operating System: Ventura Version 13.3.1
• Browser: WebKit
• Node.js Version: v18.15.0

Similar Issues

#16104, #7441, #2626

[ankur-lt]

@mxschmitt , as per we checked, opening the URL https://fonts.google.com/specimen/Montserrat via Playwright doesn't apply the font-weight appropriately, but works as expected if I start webkit in Ubuntu by executing the file pw_run.sh.

[aslushnikov]

@ankur-lt I can repro this inside docker container with your script and Playwright 1.32.3

And it also does not reproduce for me with the upcoming Playwright 1.33. Could you please try yourself with our canary builds? You can install one inside docker with npm i playwright@next and then download the relevant webkit build with npx playwright install webkit.

[ankur-lt]

Thanks, @aslushnikov! Using the canary build resolved the issue.

[aslushnikov]

Sweet! Looks like this is fixed then and will be released in the upcoming 1.33. Closing!

[Firu115]

Hey, I am experiencing the same issue with Montserrat on a Windows 11 machine while emulating on Playwright. Any fixes?

Playwright: 1.40.1
Browser: WebKit
Node: 21.2.0

[shahtaz-echo]

I am using python. And using this in azure server in windows environment. Is there any solution for this. I am using this playwright version: playwright==1.47.0