Tipografias

Swap font pairs in one place.

Typography in Loop is centralized so you can swap an entire font pairing in one place, with no hunting through components.

How fonts are loaded

Loop uses next/font to self-host fonts and expose them as CSS variables. The pairing lives in src/app/fonts.ts (or your root layout) and is applied through three tokens:

--font-display — headings and the wordmark
--font-sans — body copy and UI
--font-mono — code, labels, and metadata

import { Inter, Fraunces } from "next/font/google";

export const sans = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const display = Fraunces({
  subsets: ["latin"],
  variable: "--font-display",
});

Swap a pairing

To change the whole look:

Import a new family from next/font/google (or next/font/local for a licensed font).
Assign it to the matching CSS variable.
Apply the font variable classes on the <body> element in your root layout.

That's it — every heading and paragraph updates because components reference the token, never the font name directly.

Self-hosting a custom font

For a brand or licensed typeface, drop the files into src/fonts/ and load them with next/font/local:

import localFont from "next/font/local";

export const display = localFont({
  src: "../fonts/MyBrand-Variable.woff2",
  variable: "--font-display",
});

Mono usage

The monospace token shows up in code blocks, eyebrow labels, and timestamps. If you change it, glance at the docs pages and the changelog to confirm the new face has the weights those components expect.