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.
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.
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.
@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.
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/
https://codepen.io/mandymichael/pen/oPoaEL
Variable font resources:
https://noti.st/jpamental/APDhI7
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide