Typography
Lato for prose, Kode Mono for headings and short labels — load both once and the kit's tokens resolve everywhere.
42UI rests on two type families:
- Lato — sans-serif. Drives
--font-sansand runs everywhere prose lives — body copy, descriptions, form input. - Kode Mono — monospaced. Drives
--font-mono, whichButton,Badge, andActionIconreach for in their labels, and which any heading-class surface should pick up to land the kit's slightly-technical voice.
The kit ships the tokens; it never bundles font files. Loading the families is your bundler's job — every framework wants to optimize fonts a little differently, and forcing one strategy into a UI package would only get in your way.
Tokens
theme.css declares two CSS variables:
--font-sans: "Lato", sans-serif;
--font-mono: "Kode Mono", monospace;Tailwind v4 generates font-sans and font-mono utilities directly from these. Override either variable in your own stylesheet to retheme without touching components.
<h1 className="font-mono text-4xl">Heading</h1>
<p className="font-sans">Body copy</p>
<Button>Mono label by default</Button>Loading the fonts
Pick the path that fits your stack. As long as the family is registered under its canonical name ("Lato", "Kode Mono"), the kit's tokens resolve with no extra wiring. next/font is the exception — it hashes family names — so that path needs a small override.
Next.js — next/font/google
// app/layout.tsx
import { Kode_Mono, Lato } from 'next/font/google';
const lato = Lato({
subsets: ['latin'],
weight: ['400', '700'],
variable: '--font-lato',
});
const kodeMono = Kode_Mono({
subsets: ['latin'],
weight: ['400', '500', '600', '700'],
variable: '--font-kode-mono',
});
export default function RootLayout({ children }) {
return (
<html lang="en" className={`${lato.variable} ${kodeMono.variable}`}>
<body>{children}</body>
</html>
);
}Then in your global stylesheet, after @import "@42/ui-react/theme.css":
:root {
--font-sans: var(--font-lato), sans-serif;
--font-mono: var(--font-kode-mono), monospace;
}Lato ships canonical weights at 100 / 300 / 400 / 700 / 900; intermediate font-weight values fall back to the nearest available weight at the browser layer.
Vite, Remix, plain React — Fontsource
pnpm add @fontsource/lato @fontsource/kode-mono// app entry — pick the weights you actually use
import '@fontsource/lato/400.css';
import '@fontsource/lato/700.css';
import '@fontsource/kode-mono/400.css';
import '@fontsource/kode-mono/500.css';
import '@fontsource/kode-mono/600.css';
import '@fontsource/kode-mono/700.css';No token override needed — Fontsource registers the families under their canonical names.
CDN — Google Fonts <link>
For prototypes, demos, or anywhere a bundler isn't in the loop:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Kode+Mono:wght@400..700&display=swap"
rel="stylesheet"
/>Self-hosted — @font-face
Drop the woff2 files in your asset directory and declare them once:
@font-face {
font-family: "Lato";
src: url("/fonts/lato-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lato";
src: url("/fonts/lato-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Kode Mono";
src: url("/fonts/kode-mono-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* …repeat for 500 / 600 / 700 */Grab the woff2 files from Google Fonts and Kode Mono, or any self-hosting service you trust.
Why two families
Lato carries the prose — readable at small sizes, generous at large. Kode Mono is the kit's second voice: monospaced, slightly technical. It's what Button, Badge, and ActionIcon use for their labels, and what to reach for whenever a piece of UI should read as code-adjacent — data values, IDs, hot keys, chip labels, page titles that want a deliberately technical tone.