Leverage variable fonts to create infinitely customizable typography from a single font file, reducing HTTP requests and enabling subtle, adaptive adjustments based on viewport size, user preferences, or dark mode for a truly dynamic UI.
@font-face {
font-family: 'InterDisplay';
src: url('InterDisplay-Var.woff2') format('woff2-variations');
font-weight: 100 900; /* Defines available weight range */
font-stretch: 75% 125%; /* Defines available width range */
font-display: swap;
}
body {
font-family: 'InterDisplay', sans-serif;
font-weight: 400;
font-stretch: 100%;
}
.headline {
font-weight: 800; /* Uses the 'wght' axis */
font-variation-settings: "wdth" 110; /* Explicitly sets the 'wdth' axis */
line-height: 1.1;
}
@media (max-width: 768px) {
.headline {
font-variation-settings: "wght" 600, "wdth" 95; /* Adaptive adjustment */
}
}