Variable Fonts
- Jon Zhang
- Andrew Mallis
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.ymlunder 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. google webfonts helper
Make sure the font css file does have the
font-weightrange andfont-stretchrange 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:
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
Using CSS Custom Properties To Adjust Variable Font Weights In Dark Mode | CSS-Tricks
Fluid Font Weight with Viewport Size - Variable Fonts
Variable font resources:
Better Typographic & Editorial Design with Variable Fonts by Jason Pamental
Variable fonts guide - CSS: Cascading Style Sheets | MDN