Webkit Font Rendering Bug

We have a variable font with four character widths. The latest version of Webkit (mac OS Catalina 16.x or Safari iOS14) renders it weirdly. It becomes apparent in underlines and when using italics. But it renders other variable fonts like Inter without that problem. So it is something inside the font that make that bug appear. I tried everything (like panose, or isfixedpitch) to tell WebKit that it is not a monospaced, because I thought maybe this is the issue, but I just can’t figure out what variable causes the problems. Any idea? You probably need to font to look at the variables.

If you select text it’s all strange, too:

Which Glyphs version are you using?

Try the latest beta please. Go to Glyphs > Preferences > Updates, activate both checkboxes and press the Update button.

Tried export with cutting edge version, doesn’t change anything

And it works fine in the stable Safari? And in other apps and browsers? Then it might be a Safari bug.

It is, but there is a way to get around it, because Inter works. It may be something related to the MVAR table…

1 Like

The MVAR table is mostly about vertical metrics. And if it missing causes this it is still a bug.

It’s a Safari bug, but the Safari team tells us it’s triggered by Safari’s optimization that causes it to treat our font as monospaced. They’re working on removing this optimization, but this will take time to ship, and iOS 14 is now the “stable” release. https://bugs.webkit.org/show_bug.cgi?id=162546

We’ve set post table isFixedPitch to 0, and OS/2 table panose proportion to anything but 9. This seems to have no effect. As soon as any of the axes are used in CSS, Safari’s optimization’s kick in and font rendering is broken (we’ve confirmed there are no caching issues). Do you have any ideas on what else could cause Safari to think that the font is monospaced?

What Apple renderers like to do is to peek into the shapes and make measurements. Perhaps it takes two or more glyphs and compares their width. A smalls script should be able to find out which glyphs have the same width. Then you can make an informed guess.

Other option: heuristics in the name table. Perhaps a word triggers the behavior.

You would need to ask the Safari team. Maybe they can give you a hint about the heuristics?

WebKit seems to be getting this from Core Text, so it is possible that Core Text is the one playing tricks here (not surprising).