Fixing a persistently italic variable font

Using a variable font on your site and its rendering in italics? This might help.

Published

Category

  • css
  • variable fonts

A while ago I implemented TTHoves Variable on this site but struggled with an issue where the entire site would render in italics. This seemed to happen persistently in Safari and sometimes (but not always) in Chrome and Firefox too.

After some searching and playing around, setting the slant setting to 0 did the trick, which I applied to the body:

body {
    font-variation-settings: 'slnt' 0;
}

I'm not sure why this is needed on some fonts and not others. When reading up on web.dev slant should default to 0 so perhaps its a setting not playing nice when exporting the font. If anyone reading this knows the answer I'd love to know!

Anyway, if you're having this issue, hopefully this sorts things for you.