I am working on a variable font.
I have 2 Masters and 9 instances (weights: 100 - 900).
The instances are named: Thin, UltraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold and Black.
So, Thin = 100 and Regular = 400.
But when I export it as a Variable font (___GX.ttf) and install it, the default Font Book installer shows two instances named Regular and no instance named Thin (Screenshot attached).
Interestingly, one of the “Regular” instances has the glyphs that weigh 100 (a.k.a. Thin) and the other one is just Regular (weight: 400).
After installing it, on my browser (Chrome), font-weight: 400 renders the Thin (weight 100) instance of the font.
But the property font-variation-settings: 'wght' 100; works fine. Increasing the weight from 100 to 900 renders the absolutely correct weights.
Plz help me with the issue here. How do I fix this?
Troubleshooting:
I tried renaming the instances, but the issue persists.
Notes:
Exporting the font individually by weights (9 files) works fine.
On Firefox, both properties font-weight: 100; and font-variation-settings: 'wght' 100; render the boldest instance of the font. I am safely guessing, each browser has a different way of handling a buggy variable font.
(Fixing the duplicate and mis-matched naming of the instances should fix the browser issues).
What does the font display for you on the Mac when you try to install it? Just basic installation on a Macbook. Without checking on plugins.
Because even if the variable font looks fine on Samsa or any other font inspector, but it has an issue when being installed on a Mac, that could be a crucial bug.
I tried to install another variable font (Work Sans) and that was fine. It did not have this issue.
I did find a mistake. Regular was not declared elidable for the wght axis. What you can do is add two parameters in your Regular instance: both Elidable STAT Axis Value Name, once with wght and once with ital as value.
I read up more on Elidable STAT Axis Value Name on the tutorial and I wanted to clear up that I do not have multiple widths. I only have multiple weight instances.
It would be extremely helpful if you or someone can try to recreate the issue. The steps are very simple and basic.
Just Export the glyphs file as a Variable Font and open the exported variable font file (GX.ttf) with FontBook (Mac’s inbuilt default installer).
I did and I found the issue already. Now I am trying to find a solution. It looks I will not be able to spare you from editing your file with ttx.
This entries in STAT has a wrong flag set:
<AxisValue index="3" Format="1">
<AxisIndex value="0"/>
<Flags value="0"/> <!-- SHOULD BE 2 -->
<ValueNameID value="260"/> <!-- Regular, value can be something else -->
<Value value="400.0"/>
</AxisValue>
Flags should be 2, but is 0. That is what the custom parameter should take care of, but it seems like it didn’t. So until we can fix it in Glyphs, you can use ttx or OTMaster to edit the STAT table yourself.
Thank you.
I am glad the root cause has been found.
I do not have OTMaster. I can wait for a new release of GlyphApp’s.
Any idea what version/patch will it be on?
We just tested again. Adding the Elidable STAT Axis Value Name helps, but macOS seems to require a variableStyleName as well. Add a custom parameter with that name and the value Roman to Font Info > Font:
It exports the font with the variableStyleName value in the file name.
But, the issue is fixed.
I read about variableStyleName on the site and from what I can tell, the value doesn’t need to be one of a specific list of allowed values. The value can be “Roman” or “Display” or “Sans”, correct?
Either-way, I can always rename the exported file.
Need to continue this thread. Found a related issue.
When exporting as otf/ttf (individuals weights), browser render for weights 200 and 300 is the same.
That is: font-weight: 200 and font-weight: 300 display the exact same glyph set.
Tried it on both: Chrome and Firefox.
I have sent the glyphs file to support (at) (this website without www).