Variable Fonts

Variable fonts allow designers and developers to use a single font file that contains multiple variations of the same font, such as different weights, widths, and styles. This can result in smaller file sizes and more flexible design options.

1. Install Package

To use a variable font with Typeweave, you need to install the corresponding font package. For example, if you want to use the Inter variable font:

npm install @typewe/inter

2. Import the Font

After installing the package, you can import the font into your project like this:

// Supports weights 100-900 in a single file.
import "@typewe/inter/css/index.css";

This will import both normal and italic styles (if available) for the font. All weights from 100-900 are available in a single optimized WOFF2 file.

3. CSS Usage

Once the font is imported, you can use it in your CSS stylesheets just like any other font. The difference with variable fonts is that you can specify any weight value between the min and max range:

body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
}

h1 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

/* Use any weight value between 100-900 */
.medium {
  font-weight: 500;
}

.semi-bold {
  font-weight: 600;
}

/* Smooth weight transitions */
.animated {
  font-weight: 400;
  transition: font-weight 0.3s ease;
}

.animated:hover {
  font-weight: 700;
}

Advanced: Font Variation Settings

For fonts with multiple axes (like width or optical size), you can use the font-variation-settings property:

/* For fonts with multiple axes like DM Sans */
.custom {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  /* wght = weight, opsz = optical size */
  font-variation-settings: "wght" 500, "opsz" 16;
}

4. Browser Fallbacks

Optionally, if you want to provide fallbacks for browsers that do not support variable fonts, you can use the @supports rule:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
}

@supports (font-variation-settings: normal) {
  body {
    font-family: "Inter", sans-serif;
    font-weight: 400;
  }
}

Note: All modern browsers support variable fonts (Chrome 62+, Firefox 62+, Safari 11+, Edge 79+), so fallbacks are typically only needed for very old browsers.