Skip to content
ChatJS
Esc
↑↓navigate↵open⌘Jpreview
On this page

Fonts

Customize the typography of your ChatJS app

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}`}>

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.

Was this page helpful?