Typography

Display, body, fallback, and mono families exposed as CSS variables.

The quick brown fox jumps over the lazy dog

Light · 300

The quick brown fox jumps over the lazy dog

Regular · 400

The quick brown fox jumps over the lazy dog

Medium · 500

The quick brown fox jumps over the lazy dog

Semi · 600

The quick brown fox jumps over the lazy dog

Bold · 700

The quick brown fox jumps over the lazy dog

Black · 900

The quick brown fox jumps over the lazy dog

Setup

Load the four families with `next/font` and expose them as CSS variables. Tailwind v4 picks them up via `@theme`.

TSsrc/app/layout.tsx

import { Inter, JetBrains_Mono } from "next/font/google";
import localFont from "next/font/local";

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

const mono = JetBrains_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

const albra = localFont({
  variable: "--font-heading",
  display: "swap",
  src: [
    { path: "../../public/fonts/albra/Albra-Light.otf",   weight: "300", style: "normal" },
    { path: "../../public/fonts/albra/Albra-Regular.otf", weight: "400", style: "normal" },
    { path: "../../public/fonts/albra/Albra-Medium.otf",  weight: "500", style: "normal" },
    { path: "../../public/fonts/albra/Albra-Semi.otf",    weight: "600", style: "normal" },
    { path: "../../public/fonts/albra/Albra-Bold.otf",    weight: "700", style: "normal" },
    { path: "../../public/fonts/albra/Albra-Black.otf",   weight: "900", style: "normal" },
  ],
});

const grotesk = localFont({
  variable: "--font-grotesk",
  display: "swap",
  src: [
    { path: "../../public/fonts/albra-grotesk/AlbraGrotesk-Light.otf",          weight: "300", style: "normal" },
    { path: "../../public/fonts/albra-grotesk/AlbraGrotesk-Regular.otf",        weight: "400", style: "normal" },
    { path: "../../public/fonts/albra-grotesk/AlbraGrotesk-Medium.otf",         weight: "500", style: "normal" },
    { path: "../../public/fonts/albra-grotesk/AlbraGrotesk-Semi.otf",           weight: "600", style: "normal" },
    { path: "../../public/fonts/albra-grotesk/AlbraGrotesk-Bold.otf",           weight: "700", style: "normal" },
    { path: "../../public/fonts/albra-grotesk/AlbraGrotesk-Black.otf",          weight: "900", style: "normal" },
  ],
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html
      lang="en"
      className={`${inter.variable} ${mono.variable} ${albra.variable} ${grotesk.variable}`}
    >
      <body>{children}</body>
    </html>
  );
}

CSSsrc/app/globals.css

@theme inline {
  --font-sans: var(--font-sans);
  --font-mono: var(--font-geist-mono);
  --font-heading: var(--font-heading);
  --font-grotesk: var(--font-grotesk);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

body {
  font-family: var(--font-grotesk), var(--font-sans), system-ui, sans-serif;
}

Usage

Reference the families through Tailwind utilities or the raw CSS variables.

TSExample

// Tailwind v4 picks up the variables you exposed in @theme.
// In components, use the family utilities or var(--font-*) directly.

<h1 className="font-heading text-5xl">Display heading</h1>
<p className="font-grotesk">Body copy in Albra Grotesk.</p>
<p className="font-sans">Body copy in Inter (fallback).</p>
<code className="font-mono">const x = 1;</code>

Albra — Heading

Display typeface. Use for page titles, hero headlines, and section headers.

The quick brown fox jumps over the lazy dog

Light · 300

The quick brown fox jumps over the lazy dog

Regular · 400

The quick brown fox jumps over the lazy dog

Medium · 500

The quick brown fox jumps over the lazy dog

Semi · 600

The quick brown fox jumps over the lazy dog

Bold · 700

The quick brown fox jumps over the lazy dog

Black · 900

The quick brown fox jumps over the lazy dog

Albra Grotesk — Body

Workhorse body typeface. Use for paragraphs, UI copy, and descriptions.