...
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:
| Code Block |
|---|
@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.
...