Warning: That tutorial about variable fonts broke my whole project

A senior designer I know named Jess told me last month to stop using variable fonts in production mockups because they act weird across different browsers. I thought she was just being old school and kept pushing forward with a cool variable font I found for a client site. After 3 days of tweaking auto layout, I opened my file on Chrome and the entire text block collapsed into a single jumbled line. Has anyone else had variable fonts mess up their Figma frames when exporting for dev?

2 comments

2 Comments

lily_sullivan821d ago

wait no way this exact thing happened to me two weeks ago on a branding project and i literally wanted to throw my laptop out the window. i spent forever getting this variable font to animate perfectly in figma and then when i exported it for the dev to implement, chrome just decided to smash all the letter spacing into nothing and it looked like one giant blob of text. i had to totally redo the whole typography system with static weights and it took me an extra full day to fix everything. honestly jess might have had a point because variable fonts are cool in theory but they seem to break in really unpredictable ways once they leave the figma sandbox.

terry_hayes181d ago

Did you see that writeup by Mandy on UX Collective about how variable fonts actually increase the chance of rendering bugs on older chrome versions? She tested like 30 different fonts and found that the letter spacing thing happens every time the font weight shifts between thin and bold too fast in the browser. I've been through that exact blob text nightmare on a newsletter template and it made me swear off variable fonts for anything going to email or web. Static weights are boring but they just work.