I’m working on a variable font with weight and optical size axes. When viewing the exported variable font in mobile Safari (iOS 16.0) at the weight (400) of the Variable Font Origin master (Regular), the kerning and spacing gets completely messed up. When I change the weight to anything other than 400 (like 399 or 401), everything appears much better.
This issue seems like it might be somewhat similar to the bug described in Creating a variable font | Glyphs; however, the rendering is fine on desktop (macOS 12.5.1), and the resulting appearance isn’t that of an axis extreme.
Any thoughts, ideas, or workarounds? Anything would be much appreciated
And there are two things you should change.
The “Virtual Master” needs the coordinates in final values. So use anything between 100 and 900 for the Weight axis.
And the Axis Location parameter of the first instance has a wrong value for the Weight axis, too.
Thanks for investigating the issue and clearing up the inconsistencies the properties. I was attempting to normalize the weights of the masters against the CSS values 100–900 but start the named weight instances inside that range… it makes sense that the instances and masters need to match Axis Location values.
If I set “opsz” to 10 across all sizes, then the optical size axis doesn’t get used? As far as the CSS fix goes, setting the value explicitly for each size doesn’t prevent the issue either.
(I’m using px units for testing the optical size axis display)
Until the issue with mobile Safari is fixed, it seems so far like the simplest workarounds are either setting the Variable Font Origin to a different master that is less likely to be used or changing the weight value to anything else (like 399).