next/font | Notion

`globals.css`

@import "tailwindcss";

/* Map injected font variables for use in Tailwind */
@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

`layout.tsx`

import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

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

// Apply font variables to <html> for global availability
<html className={`${geistSans.variable} ${geistMono.variable}`}>

`geistSans` object structure

geistSans.className  // Apply the font-family directly to a component
geistSans.variable   // Inject CSS variable for use in Tailwind or custom themes

Generated CSS (from `next/font`)

.geist_e531dabc-module__QGiZLq__variable {
  --font-geist-sans: "Geist", "Geist Fallback";
}

.geist_mono_68a01160-module__YLcDdW__variable {
  --font-geist-mono: "Geist Mono", "Geist Mono Fallback";
}

Final HTML output

<html class="geist_e531dabc-module__QGiZLq__variable geist_mono_68a01160-module__YLcDdW__variable">

These classes inject the --font-... variables globally into the :root scope.

globals.css

layout.tsx

geistSans object structure

Generated CSS (from next/font)

Final HTML output

`globals.css`

`layout.tsx`

`geistSans` object structure

Generated CSS (from `next/font`)