--- title: Fonts description: Customize the typography of your ChatJS app --- ChatJS uses [Geist](https://vercel.com/font) 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`: ```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 `` element and referenced by Tailwind. ## Changing Fonts ### 1. Import your fonts Replace the imports in `app/layout.tsx`. Any [Google Font](https://fonts.google.com/) or local font works. ```tsx 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 `` element and replace the old variable references with your new ones: ```tsx ``` > **Note** > > 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: ```tsx 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`.