A variable font is a single file that acts like multiple fonts. Using variable fonts will reduce loading time, expand more style options and smooth animation.

Setting variable fonts is easy enough as using normal fonts. Set up font-family, src, font-weight range, and font-stretch range, and you are good to go.

Setup

Download the font file and extract under simplytheme/src/fonts/
Include the style file in simplytheme.libraries.yml under fonts: css: theme: src/fonts/yourfont/style.css: {}
To serve Google fonts locally, there’s no css file provided by default. Use this tool to generate the css file to save some effort. https://gwfh.mranftl.com/fonts
Make sure the font css file does have the font-weight range and font-stretch range defined.

Without defining the font-weight and font-stretch will produce issues for browser font weight rendering. Suggested font-weight range is: 100 1000; and font-stretch: 75% 100%; as default.

Here's an example:

@font-face{
    font-family:"Inter";
    src:url("Inter-VariableFont_slnt,wght.ttf") format("woff");
    font-weight: 100 1000;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
}

4. Setup the variables for font-family and font-weight like you normally do for regular fonts in typography.scss.
5. We are all set to go.

Resources

Variable fonts are supported by all modern browsers: https://caniuse.com/variable-fonts
There are plenty of settings you can adjust and play around with variable fonts, here’s a great article to talk about each settings of variable fonts:
https://24ways.org/2019/an-introduction-to-variable-fonts/

Articles to read about dynamically adapt size and weight to screen sizes and mode:

Variable font resources:

Kalawiki

Variable Fonts

Setup

Here's an example:

Resources