Unlike traditional fonts with fixed weights (like regular or bold), variable fonts allow for a continuous range of weights and other stylistic options. Variable fonts contain a range of "axes" that let you adjust font properties smoothly within a defined range. For example, in "Chillax," there is a wght axis, which lets you adjust the font weight between 200 and 700. This allows you to use any weight (like 330, 512, etc.) for a custom appearance, rather than being limited to predefined weights. With this current setup, you’re already loading the "Chillax" font correctly:

@font-face {
  font-family: 'Chillax';
  src: url('fonts/Chillax-Variable.woff2') format('woff2'),
       url('fonts/Chillax-Variable.woff') format('woff'),
       url('fonts/Chillax-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

█   Basic Font Declaration

body {
    font-family: 'Chillax', sans-serif;
}

█   Adjusting Font Weight with font-variation-settings

Since "Chillax" supports variable weight, you can set custom values like so:

.text-medium {
    font-family: 'Chillax', sans-serif;
    font-variation-settings: 'wght' 400;
}

.text-bold {
    font-family: 'Chillax', sans-serif;
    font-variation-settings: 'wght' 600;
}

This will apply different weights to .text-medium and .text-bold without needing separate font files.

█   Using font-weight with Variable Fonts

Since the wght axis controls the weight, you can also set it with font-weight, which is often simpler and more compatible:

.text-light {
    font-family: 'Chillax', sans-serif;
    font-weight: 300;
}

.text-extra-bold {
    font-family: 'Chillax', sans-serif;
    font-weight: 700;
}

This approach works well, and CSS will interpret it as a variable font weight if the font supports it (as "Chillax" does).

█   Compatibility

Variable fonts are well-supported on most modern browsers, including:

• Chrome (since version 62)
• Firefox (since version 57)
• Safari (since version 11)
• Edge (since version 17)

However older browsers, Internet Explorer and some older versions of mobile browsers don't support variable fonts. In these cases, a fallback font or fixed weights may be required.

█   Fallbacks

If you need to ensure compatibility for older browsers, you can provide alternative font weights (like 300, 400, 700) and define them using standard font-weight properties alongside font-variation-settings for browsers that support it:

.text-custom {
    font-family: 'Chillax', sans-serif;
    font-weight: 500; /* fallback for browsers without variable font support */
    font-variation-settings: 'wght' 500; /* preferred method for supported browsers */
}