Fonts

The typeface is Sen, a variable font with weights from 400 to 800. It's self-hosted through next/font, so builds never need to reach Google Fonts and there is no layout shift while it loads.

Install Sen

$pnpm add @fontsource-variable/sen

Load the file in the root layout with next/font/local. It preloads the font, adds a size-matched fallback, and puts the family in a CSS variable:

import localFont from "next/font/local"; const sen = localFont({  src: "../../node_modules/@fontsource-variable/sen/files/sen-latin-wght-normal.woff2",  variable: "--font-sen",   // exposed as a CSS variable…  weight: "400 800",        // …covering every weight in one variable file  display: "swap",}); <html className={sen.variable}>

Then point Tailwind's font tokens at it:

@theme {  --font-sans: var(--font-sen);   /* font-sans and the body use Sen */  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;}

Weights

Text uses 400 for body, 600 for labels and controls (text-control, font-semibold) and 700 for headings. Stick to those so the type scale stays consistent.

Use a different font

For everyone, in code

Swap the loader in the layout. Keeping the --font-sen variable name means nothing else changes:

import { Inter } from "next/font/google"; // Keep the variable name, and every component switches with no other changeconst inter = Inter({ subsets: ["latin"], variable: "--font-sen", display: "swap" }); <html className={inter.variable}>

For one person, at runtime

The Theme builder lets people paste a Google Fonts link or upload a font file. It overrides --font-sans and keeps Sen as the fallback; see Theming.