Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Webkit font rendering (spacing / icon fonts)

See original GitHub issue

Context:

Playwright Version: 1.1.1
Operating System: Windows
Browser: WebKit 1269

Bug description When trying to test screenshots with webkit, I noticed that font rendering looks a bit weird and no font icons were rendered. The icon font rendering can be easily tested by starting the playwright webkit browser (eg. AppData\Local\ms-playwright\webkit-1269\Playwright.exe) directly and navigating for example to https://material.io/resources/icons An interesting behavior I could observe was that when I set font-kerning: normal on font icons (eg. on .material-icons), some icons appeared, some stayed hidden and some showed incorrect icons (eg. keyboard_arrow_down was rendered as keyboard icon only).

Also it seems while font-kerning: auto seems to enable it by default in other browsers, this does not seem to happen at all in the playwright webkit.

Without font-kerning: normal

With font-kerning: normal

How it should like like eg. in Chrome:

Any ideas on how to solve this?

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:23 (9 by maintainers)

Top GitHub Comments

3reactions

fujiicommented, Jun 18, 2020

WebKit bug: 201214 – [Win][Uniscribe] Material icons containing underscore or numbers aren’t shown because ScriptItemize splits them apart https://bugs.webkit.org/show_bug.cgi?id=201214

2reactions

fujiicommented, Jul 10, 2020

Bug 214174 – [WinCairo] WOFF2 font support https://bugs.webkit.org/show_bug.cgi?id=214174

Top Results From Across the Web

font-smooth - CSS: Cascading Style Sheets - MDN Web Docs

The font-smooth CSS property controls the application of anti-aliasing when fonts are rendered.

149548 - text-rendering: optimizeLegibility breaks glyph ...

Issue 149548: text-rendering: optimizeLegibility breaks glyph spacing when ... will display a missing character symbol rather than substituting a local font ...

How to avoid layout shifts caused by web fonts - Simon Hearne

Rendering text without layout shifts is much more complex than it should be! You can avoid layout shifts entirely if you can apply...

css - Issue with custom icon font rendering differently in ...

Basically you want to avoid importing a different size SVG than you'll be using in CSS. For example if you import 16x16px SVG...

Best practices for fonts - web.dev

Best practices for fonts · Delayed text rendering: If a web font has not loaded, browsers typically delay text rendering. In many situations, ......