Fonts

Learn how to change fonts using Google Fonts or custom fonts.

You can change the font in app/layout.tsx. The starter kit currently uses:

app/layout.tsx

import { Literata } from 'next/font/google';
import { GeistSans } from 'geist/font/sans';

const literata = Literata({
  subsets: ['latin'],
  variable: '--font-literata'
});

export default function RootLayout({ children }) {
  return (
    <html
      lang="en"
      className={`${GeistSans.variable} ${literata.variable}`}
    >
      {/* ... */}
    </html>
  );
}

To change to a different Google Font, for example Inter:

app/layout.tsx

import { Inter } from 'next/font/google';
import { GeistSans } from 'geist/font/sans';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter'
});

export default function RootLayout({ children }) {
  return (
    <html
      lang="en"
      className={`${GeistSans.variable} ${inter.variable}`}
    >
      {/* ... */}
    </html>
  );
}

Or use a custom font:

app/layout.tsx

import localFont from 'next/font/local';

const customFont = localFont({
  src: './fonts/custom-font.woff2',
  display: 'swap'
});

Font Variables

Font variables are automatically available via the variable prop. You can use them in your CSS:

app/globals.css

:root {
  --font-sans: var(--font-geist-sans);
  --font-literata: var(--font-literata);
}

Then use them in your components:

components/example.tsx

<div className="font-sans">This uses Geist Sans</div>
<div className="font-[family-name:var(--font-literata)]">This uses Literata</div>