Variable font renders badly in most browsers

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 :wink:

1 Like