Font

Volt.kit uses the Geist variable font, which provides a modern and clean typography experience. This is an optional font for now.

Overview

The Geist font is a variable font that supports a wide range of weights (100-900).

To use this font in your application, import the font CSS file:

import "@epilot/volt-ui/font.css";

This font is converted to base64 data format and inlined during the build time. The size of the font is ~90KB.

This font can be used in several ways

Apply the font to any element using the utility class:

<div className="volt-font-geist">
  This text uses the Geist font
</div>

Use the CSS variable directly in your styles:

.my-mfe {
  font-family: var(--volt-font-geist);
}

To use Geist as your default font family in Tailwind CSS v4:

@theme {
  --default-font-family: var(--volt-font-geist);
}