I just exported an early test for a variable font I’m working on and ran into this issue when testing in Illustrator. It’s adding a bunch of points that don’t exist in the design. Consequently the paths appear jagged.
Has anybody else ran into this issue / know what might be causing this to happen?
In OTVar export, all curves are converted to TT, and what you see in illustrator after converting to paths is a conversion from TT back to PS. Would surprise me if it was the same points after converting twice.
The kink may already be caused in the PS curves. I assume the triplet of points around the inflection change their angle and their proportions throughout the masters?
@mekkablue thanks for your response. In theory that all makes perfect sense. Still figuring out the quirks of variable fonts for sure!
Double checked and there are no issues in my PS curves and OTFs generated from my instances don’t have kinks.
I just expanded some default variable fonts in Illustrator (like Minion, Myriad, etc.) and the curves + points reflect original PS curves. Any idea how they were able to achieve this? Expanded a couple variable fonts from small foundries and those tended to reflect the TT curves converted to PS.
The kinks are only really visible in the tight counters at the heaviest weight.
Most default font use the qubic bezier path directly. Only variable font (mostly) use TrueType curves.
These are CFF2 fonts with PS outlines.
Try to get rid of inflection points wherever your design allows it. Try to sync node proportions or angles across masters where it is not possible. Good tools for this:
Even without inflection points in the masters, the conversion to quadratic curves will put nodes there, which will probably kink unless you have a way of controlling the conversion or the quadratic handles directly.
One way that avoids kinks is to make sure the handles on each side of the inflection are identical in length and angle in all masters. But that may not give you the curves you need.
Thanks for all this insight and taking the time to answer these questions!
@mekkablue suppose my final questions would then be if there’s currently a way to generate CFF2 variable fonts with Glyphs? If there isn’t, do you know what platform is used to generate these files? Understand that CFF2 aren’t widely supported yet on all browsers, so thinking more for desktop usage.
Thanks for directing me to the scripts / plugins as well. I’ll give those a play to see how it affects the curves!
You would have to do CFF2 with fontmake I believe. It takes a .glyphs file as input with the -g option.
The kinks happen where a curved path is too flat (goes along the handle and doesn’t curve for too long). I guess it confuses the converter and it adds a bunch of nodes there, resulting in kinks. Either change the angle of the handles, or add extra nodes to have a real flat part:
Then you need to keep proportions or angle between all 4 points (2 handles, 2 nodes) in all masters to avoid kinky interpolation. Tricky but possible!
I think this would be good to add to the tutorials by the way
Hi all,
I had the same problem while exporting Variable fonts with TT outlines. Especially so in Italics. The first step in solving this problem was the Avoid Kinks tutorial which is beautifully written and explains the process in detail. Using Henrique Beier’s plug-in Show Smooth Node Angle and Proportion is a life-saver (thank you so much for making it, if we ever meet I’m buying drinks!).
But the thing I could not solve at start by following any recommended procedure was the ironing out of little wrinkles like these that would appear in the custom variants:
I went through every detail and all my paths were de-kinked and simplified. Then I figured out that my BCPs were slightly overextended in the angled corners like this:
After I pulled them back the wrinkles finally disappeared (variations tested in Illustrator)!
And the result:
I have no idea if this is common knowledge, but it took me many hours of work to figure it out and it specifically affects Variable TTF (not the static fonts). I propose adding this solution to the Avoid Kinks tutorial, if others can replicate the process I described.
The conversion to TrueType outlines is very tricky with those unusual handle arrangements. Also very shallow inflection can cause problems like this.
I think that the handle arrangement in my example is not unusual at all. Yes, it is pushing the software’s capabilities to its limit in a Black style but that’s what variable fonts are supposed to do. And if you take a look at the first picture in the thread posted by @brwll you can see that his arrangement of handles is also at the point of being overextended in the way I described my example.
I don’t know if I’m being clear enough. I’m saying when the vertical handle crosses that horizontal red line you get a wrinkle in the variable TTF.
I advise using the plugin Show Angled Handles, this also highlights overshooting handles like the ones in your screenshot. The mekkablue script Path Problem Finder also finds these and prints a tab with the affected layers.
Or use the Show Angled Handles plug-in for seeing large handles live.
If the handles cross, that means that you have a single curve segment winding twice, clockwise and counterclockwise. And one winding is typically invisibly tiny. Now if you do not intend to double-wind your segments, and it is unlikely, I consider handles above 100% length a mistake.
You are completely correct. My point was being, In OpenType PS fonts or Variable Fonts with CFF2 paths handles crossing produces no problems – everything looks clean. In VF with TT paths, those wrinkles appear and the cause of it was not obvious to me. I could not find the solution for it here on the forum nor in the tutorials and it took me a long time to figure it out.
And none of the answers to the original post here pointed to overextended handles – and I can tell you with certainty that was the problem @brwll was dealing with. 
