Fonts

Components never load fonts. They use three Tailwind font utilities, so they pick up the fonts your project already has.

font-sans and font-mono come with Tailwind. font-display comes with the base item and falls back to a system sans-serif stack until you choose a face for it.

The fonts on this siteCopy Anchor Link

This site sets the interface and headings in Geist Sans, code in Geist Mono, and the wordmark in Geist Pixel. They load from the geist package, which serves the files from your own domain through next/font.

npm install geist

import { GeistMono } from "geist/font/mono";
import { GeistSans } from "geist/font/sans";

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

Then point the theme variables at them:

@theme inline {
  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
}

Your own fontsCopy Anchor Link

Load any font with next/font and give it a CSS variable, then point --font-sans, --font-display or --font-mono at that variable. A face with some character suits --font-display; use it at weight 600 with tight leading.