[BUG] Webkit renders some fonts incorrectly on Windows

[vladkrasn]

Context:

• Playwright Version: 1.24.2
• Operating System: Windows 11
• Node.js version: 16
• Browser: Webkit

This issue was raised here previously: #7441 (also related to #2626)
I don't think it was resolved, since the person who raised it fixed it on the end of their website, whereas the Webkit's issue is still present

An easy example would be https://nextjs.org/
Webkit:

Chrome:

[mxschmitt]

Looks like #7441 (comment) still applies. We recommend using macOS or Linux when testing with WebKit, since when using macOS its as close as it can get with font rastering / image rendering etc.

cc @fujii.

[fujii]

WebKit WinCairo port is still using Cairo GDI font backend that doesn't support color fonts and variable fonts.
It should switch to DirectWrite. We have two choices, using Cairo DirectWrite font backend and replacing Cairo with Skia.
This is an upstream bug ticket to use Cairo DirectWrite font backend.
https://bugs.webkit.org/show_bug.cgi?id=215259
Someone is working on Skia integration in WebKit Slack.
If you're will to help, join WebKit Slack.
https://webkit.org/getting-started/#contribute

[mxschmitt]

Closing as per's above answer.

Thanks @fujii 💯

[Th3S4mur41]

I was facing the same issue while trying to reproduce a bug in webkit.
Good to know that this does not apply to Safari on MacOS/iOS