Fonts
Aether UI ships six curated Google Fonts optimised for professional UI development. The font picker in the top nav applies your choice globally — all components update instantly. Your selection is persisted in localStorage.
Live preview
Use the font picker in the top navigation bar to switch fonts. The preview below reflects your current selection.
Team overview
Manage your team members and their account permissions here.
| Name | Role | Status |
|---|---|---|
Sofia Davies sofia@acme.com | Admin | Active |
Jackson Lee jackson@acme.com | Developer | Active |
Isabella Nguyen isabella@acme.com | Designer | Away |
William Kim will@acme.com | Viewer | Inactive |
Showing 4 of 24 members
Font catalog
Each font is pre-loaded via Next.js next/font/google— zero layout shift, self-hosted by Vercel's CDN, no external requests at runtime.
The quick brown fox jumps over the lazy dog — 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
The standard for UI. Optimised for screen readability at small sizes. Widely used in dashboards, SaaS, and design tools.
The quick brown fox jumps over the lazy dog — 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
A modern geometric sans with a touch of warmth. Excellent for marketing and product UI alike.
The quick brown fox jumps over the lazy dog — 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Clean and purposefully restrained. Designed for use at small text sizes with optical sizing support.
The quick brown fox jumps over the lazy dog — 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Geometric humanist sans with open letterforms. Legible and modern — great for data-dense interfaces.
The quick brown fox jumps over the lazy dog — 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
Clean geometric construction with friendly proportions. A modern alternative to Inter with slightly more character.
The quick brown fox jumps over the lazy dog — 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz
A geometric sans with a subtle warmth. Beautifully balanced between technical and approachable.
How it works
All six fonts are loaded at startup via Next.js font optimisation — each assigned a unique CSS variable. Selecting a font sets a data-font attribute on <html>, and CSS rules point --font-sans to the right variable. Since all Tailwind utility classes use var(--font-sans), every component updates immediately.
/* globals.css */
:root,
[data-font="inter"] { --font-sans: var(--font-inter); }
[data-font="plus-jakarta-sans"] { --font-sans: var(--font-plus-jakarta-sans); }
[data-font="dm-sans"] { --font-sans: var(--font-dm-sans); }
[data-font="manrope"] { --font-sans: var(--font-manrope); }
[data-font="outfit"] { --font-sans: var(--font-outfit); }
[data-font="figtree"] { --font-sans: var(--font-figtree); }// Font is persisted in localStorage and restored on page load
// via an inline <script> before the first paint (no FOUC).
// To change the font programmatically:
document.documentElement.setAttribute('data-font', 'manrope')
localStorage.setItem('aether-font', 'manrope')Framework setup
After running aether-ui init, the CLI writes the font configuration to your project. Here's what it sets up for Next.js:
// app/layout.tsx
import {
Inter,
Plus_Jakarta_Sans,
DM_Sans,
Manrope,
Outfit,
Figtree,
JetBrains_Mono,
} from "next/font/google"
// Each font loaded with its own CSS variable
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" })
const plusJakartaSans = Plus_Jakarta_Sans({ subsets: ["latin"], variable: "--font-plus-jakarta-sans" })
const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-dm-sans" })
const manrope = Manrope({ subsets: ["latin"], variable: "--font-manrope" })
const outfit = Outfit({ subsets: ["latin"], variable: "--font-outfit" })
const figtree = Figtree({ subsets: ["latin"], variable: "--font-figtree" })
const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono" })
export default function RootLayout({ children }) {
return (
<html lang="en" suppressHydrationWarning>
<body className={`${inter.variable} ${plusJakartaSans.variable} ${dmSans.variable} ${manrope.variable} ${outfit.variable} ${figtree.variable} ${jetbrainsMono.variable} font-sans`}>
{children}
</body>
</html>
)
}For Vite + React, use @fontsource packages instead:
# Pick your font
npm install @fontsource-variable/inter
npm install @fontsource-variable/plus-jakarta-sans
# main.tsx
import "@fontsource-variable/inter"
/* globals.css */
:root { --font-sans: "Inter Variable", sans-serif; }Configuration
Your chosen font is saved in aether.config.json. The CLI uses this when adding new components to ensure the correct import is generated.
{
"$schema": "https://aether-ui.dev/schema.json",
"font": {
"sans": "plus-jakarta-sans",
"mono": "jetbrains-mono"
},
"tailwind": {
"cssVariables": true
}
}