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.
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.
