This has been an ongoing issue in my current job and my previous job (in Sketch as well, so to be fair its not unique to Figma.) I’m not sure it qualifies as a bug per se because it is “technically correct,” but that’s cold comfort because the font CSS we get from Figma has always been unusable. I can’t convince our website that it’s “technically correct” so I’m calling it a bug for our purposes!
I’m hoping either Figma would consider allowing for some options to adjust its font CSS output, or the community could let me know if a plugin could possibly fix this (even if I had to commission someone to build one for me.)
Its strange because the font CSS Figma outputs has always been incompatible with our webfonts, and yet I’ve only found a couple other people outside our company with this same problem. The issue is not unique to the “Motiva” font, we fought with another font in the past and the new font we want to implement in the future will still have this problem.
I’m told there’s nothing we can do on our end when setting up our web fonts to make it work the way Figma handles it. We can not use “font-style” or “font-weight,” we HAVE to treat each weight/style as separate fonts. Is this fundamental to how webfonts work? If so, why does Figma handle it this way? Does it depend on the font itself and we’ve just been incredibly unlucky?
I’ve created this conversion document, but in the years I’ve been dealing with this I haven’t been able to make it stick process-wise. This is a big company with a lot of designers, developers, project managers, etc. It’s difficult to remember “ignore this bit, replace it with this bit” across a zillion people on a zillion project files. Even though I’m personally very familiar with this issue, I still have trouble with these conversions, so it feels unfair to expect others to remember all this.
Do I need to go to the font foundry we purchased the font from and ask them to change the font files on their end? This really doesn’t seem like their problem though and I can’t quite articulate what I’d want them to do, so it feels embarrassing to ask them to “make your font file somehow different please.”
What can I do to fix the CSS that Figma outputs? I’ve tried converting the font files myself, to no avail. Lost count of the number of font-hacking-apps I’ve downloaded I’m out of ideas!