/
Variable Fonts

Variable Fonts

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

  1. Download the font file and extract under simplytheme/src/fonts/

  2. Include the style file in simplytheme.libraries.yml under fonts: css: theme: src/fonts/yourfont/style.css: {}

  3. 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

  4. 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("ttf"); 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:

https://rwt.io/typography-tips/digging-dynamic-typography

https://css-tricks.com/using-css-custom-properties-to-adjust-variable-font-weights-in-dark-mode/

Fluid Font Weight with Viewport Size - Variable Fonts

 

Variable font resources:
https://noti.st/jpamental/APDhI7
Variable fonts guide - CSS: Cascading Style Sheets | MDN

 

Related content

Set fonts locally
Set fonts locally
More like this
Typography modular scale methodology
Typography modular scale methodology
More like this
SCSS coding standards
SCSS coding standards
More like this
Frontend Resources
Frontend Resources
Read with this
Fonts
More like this
CSS/SASS philosophy
CSS/SASS philosophy
Read with this