Can I simply use 'Inter var' if I only need support for recent browsers?

[collimarco]

I don't need support for legacy browsers, but only for recent ones.

Can I simply use font-family: 'Inter var' ?

What would be the browser support for that?

[rsms]

Yes! (You of course also need to import and declare the variable font files)

What would be the browser support for that?

See https://caniuse.com/variable-fonts

[collimarco]

Thanks! On a modern browser that supports both, what is the advantage of using font-family: 'Inter var' instead of font-family: 'Inter'? Or the result is exactly the same?

[rsms]

No advantage; the browser will simply ignore the former.

Think of it this way: I'm at the grocery store and you text me "buy bananas" then I go to the fruit section and pick bananas, but before I check out from the store you text me again and say "buy oranges instead of bananas" so I put the bananas back and pick up oranges instead. What I pay for is the oranges.

Same thing with a lot of CSS stuff and fonts in particular in web browsers; only the final effective fonts are actually used. Same goes for loading font files — even if you declare 100 @font-face declarations with 100 different font files, only the actual font files needed are loaded. So when you use inter.css which has lots of @font-face declarations, you only pay for the fonts actually used, which in most cases means just loading a single font file (Inter.var.woff2)

Here's complete CSS for using Inter version 4 in "modern" web browsers:

@font-face {
  font-family: "inter";
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url("res/Inter-Variable.woff2") format("woff2-variations"),
       url("res/Inter-Variable.woff2") format("woff2");
  src: url("res/Inter-Variable.woff2") format("woff2") tech("variations");
}
@font-face {
  font-family: "inter";
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  src: url("res/Inter-Variable-Italic.woff2") format("woff2-variations"),
       url("res/Inter-Variable-Italic.woff2") format("woff2");
  src: url("res/Inter-Variable-Italic.woff2") format("woff2") tech("variations");
}
:root {
  font-family: inter, system-ui, sans-serif;
}

[collimarco]

No advantage; the browser will simply ignore the former.

I mean, once a browser has downloaded 'Inter var' instead of 'Inter', what is the advantage? Is 'Inter var' a better font in some ways?

[rsms]

It’s variable; more features. You can learn more about variable fonts with a web search or by reading this https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts

[collimarco]

@rsms Thanks for all the information!