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
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 andfont-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: Variable fonts | Can I use... Support tables for HTML5, CSS3, etc
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
https://codepen.io/mandymichael/pen/oPoaEL
Variable font resources:
Better Typographic & Editorial Design with Variable Fonts by Jason Pamental
Variable fonts guide - CSS: Cascading Style Sheets | MDN