I have made a font containing an ‘avar’ table to convert the values of a Glyphs axis to other values. However the rendering fails in major ways in every browser and OS combination I have.
What are your experiences? Workarounds?
I knew that Firefox has issues. Other browsers were fine.
It’s an avar on the opsz axis, and it breaks left, right, and centre. Do you know of any useful html documents that are known good?
Eg. this screenshot from (L-to-R) Safari, Firefox, Chrome:
In Safari the 700 weight is not what it should be. Instead it is a weird synthesised faux bold, with the wrong letterspacing. Also the weight of the body copy is wrong (not the correct optical size).
Firefox Renders the bold subheading correctly, but the optical size for the body copy is correct here, but does not change anywhere in the document (I use “font-optical-sizing: auto;” in the CSS).
Finally Chrome renders the bold subheading incorrectly, instead it synthesises a slightly heavier than body text, and if you zoom in on it it is rendered as a graphic, thus making it blurry due to the lack of pixel-snapping. Oh, and the body copy is the wrong optical size.
Crazytown.
IIRC you need to be careful with the CSS too. Some of what you wrote reminded me of CSS issues.
My CSS is as simple as possible. The bug is – in my guess – the lacking or faulty implementation of VF in browsers.