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?
- I tried renaming the instances, but the issue persists.
- Exporting the font individually by weights (9 files) works fine.
- On Firefox, both properties
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).