I have a variable font with just a few characters that I’m using for a logo. It looks fine on Safari on Mac, but in every other browser I tried it looks bad in a different way:
Safari:
Chrome:
Firefox:
Safari (iOS):
What might be causing this? (Glyphs file attached here. I’m using Glyphs 2 and exporting as a variable ttf.)
symbiosis.glyphs (61.7 KB)
Hmm, works for me in Chrome, Safari and Firefox (macOS). How are you testing?
Maybe try this file I exported (I didn’t change anything, just exported from Glyphs 3):
SymbiosisLogoVF.ttf (7.4 KB)
Absolutely wild logotype by the way!
Oops, I realize it had nothing to do with the font settings — I had just forgot to set the font-weight: normal for the h1, and so every browser was trying to make it bold in a different way. Thank you for helping with this!
I was going to say, remember to set font-variant: normal etc in your CSS 
1 Like