Variable font display issue in mobile Safari

Glyphs
1

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.

Variable font rendering in Safari on macOS
Variable font rendering in Safari on macOS3306×1868 225 KB

macOS Safari 400 weight

Variable font rendering in Safari on iOS 400 weight.PNG
Variable font rendering in Safari on iOS 400 weight.PNG1170×2532 134 KB

iOS Safari 400 weight

Variable font rendering in Safari on iOS 401 weight.PNG
Variable font rendering in Safari on iOS 401 weight.PNG1170×2532 124 KB

iOS Safari 401 weight

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 :pray:

2

Can you send us the .glyphs file (by email to support at this domain)?

3

Sure, I’d be happy to. Thanks!

4

I found and fixed a few issued with the font and can make the font work in iOS. But only if one certain thing is wrong. I’ll continue that tomorrow.

5

Thank you! I look forward to learning from your expertise there.

6

I can’t figure it out. But as all other apps/browsers are happy with the font it suspect a iOS but. But there is an easy fix. Add this to your css:

font-variation-settings: "opsz" 10;
7

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.

8

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.

  font-size: calc(var(--font-size-15) * 1px);
  font-variation-settings: "opsz" var(--font-size-15);

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

9

FYI I submitted this issue in a bug report to Apple. I’ll update this thread if I learn anything from them.

10

Safari has had a buggy implementation of opsz since day one. Rename the axis tag to circumvent the bugs.

11

Do you have the feedback ID number?

I’ve been working on the optical sizing implementation in WebKit, and would love to investigate more (ideally with sample content). Please feel free to reach out: mmaxfield@apple.com

12

Unfortunately, I don’t have a reference. I submitted to Feedback - Safari - Apple (probably on the date I posted about it here) and never received a response.

I’m happy to share my demo files with you directly though

13

IIRC You should have gotten a confirmation email. That should contain the reference number.