Skip to main content
ChatJS uses Geist as the default font family for both sans-serif and monospace text. You can replace it with any font supported by next/font.

​
Default Setup

The fonts are configured in app/layout.tsx: 
import { Geist, Geist_Mono } from "next/font/google";

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

const geistMono = Geist_Mono({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-geist-mono",
});
The CSS variables --font-geist and --font-geist-mono are applied to the <html> element and referenced by Tailwind.

​
Changing Fonts

​
1. Import your fonts

Replace the imports in app/layout.tsx. Any Google Font or local font works. 
import { Inter, JetBrains_Mono } from "next/font/google";

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

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

​
2. Update the class names

In the same file, find where the font variables are applied to the <html> element and replace the old variable references with your new ones: 
<html className={`${sans.variable} ${mono.variable}`}>
Keep the CSS variable names (--font-geist and --font-geist-mono) the same to avoid updating Tailwind config and globals.css. If you prefer different variable names, update the fontFamily section in tailwind.config.ts to match.

​
Using local fonts

For self-hosted fonts, use next/font/local instead: 
import localFont from "next/font/local";

const myFont = localFont({
  src: "./fonts/MyFont.woff2",
  display: "swap",
  variable: "--font-geist",
});
Place font files in app/fonts/. The src path in next/font/local is resolved relative to the file that calls it (typically app/layout.tsx), so ./fonts/MyFont.woff2 maps to app/fonts/MyFont.woff2.