A different voice for your interface.
Three modern, open-source typefaces. Preview your words, find your weight, and keep complete control over how your product feels.
These optional font entries are included in the published npm package since v0.3.0. Base DEVVY styles continue to use system fonts. Nothing is fetched from a third-party font service at runtime.
Geist
Precise, quiet and versatile. A natural fit for product interfaces.
Make something yours.
Aa Bb Cc Dd Ee Ff Gg · 0123456789
import '@devvy-ui/styles/fonts/geist.css';
// Apply to the same container as your theme:
<div data-devvy-theme="light" data-devvy-font="geist">
{/* Your DEVVY UI components */}
</div>Manrope
Open, geometric forms with a warmer editorial character.
Make something yours.
Aa Bb Cc Dd Ee Ff Gg · 0123456789
import '@devvy-ui/styles/fonts/manrope.css';
// Apply to the same container as your theme:
<div data-devvy-theme="light" data-devvy-font="manrope">
{/* Your DEVVY UI components */}
</div>Geist Mono
Aligned characters for code, dashboards and technical details.
Make something yours.
Aa Bb Cc Dd Ee Ff Gg · 0123456789
import '@devvy-ui/styles/fonts/geist-mono.css';
// Apply to the same container as your theme:
<div data-devvy-theme="light" data-devvy-font="geist-mono">
{/* Your DEVVY UI components */}
</div>Choose only what you use
Import one family after the theme tokens, then set its attribute on your theme container. The optional @devvy-ui/styles/fonts.css entry declares all three. Browsers request a font only when it is used; no preload or JavaScript loader is added.
Your font, your choice
You can also use any licensed font with DEVVY UI. Load it using your application’s normal font setup and override the tokens on your theme container:
.my-app[data-devvy-theme] {
--dvy-font: "Your Font", system-ui, sans-serif;
--dvy-font-mono: "Your Mono", ui-monospace, monospace;
}Coverage and licensing
The collection contains normal-style variable WOFF2 Latin subsets. Other scripts and italic text use the fallback stack. Geist and Geist Mono are by the Geist Project Authors; Manrope is by the Manrope Project Authors. The fonts retain their SIL Open Font License 1.1 and included copyright notices independently of DEVVY UI’s MIT code. Keep those notices when copying assets.
The HTML/CSS playground deliberately blocks external assets, including font files, inside its isolated preview. Test bundled fonts here or in your application. Changing the site font does not silently change your exported design.