Fonts

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

You can change the font in app/layout.tsx:

app/layout.tsx

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

Change it to any Google Font, for example Geist:

app/layout.tsx

import { GeistSans } from 'geist/font/sans';

// Then use it in your layout
export default function RootLayout({ children }) {
  return (
    <html
      lang="en"
      className={GeistSans.className}
    >
      {/* ... */}
    </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

You can also define font variables in your CSS:

styles/globals.css

:root {
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;
}