Font

layout.tsx

import { Corinthia, Geist, Montserrat } from 'next/font/google';

const corinthia = Corinthia({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-corinthia'
})

const geist = Geist({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-geist'
})

const montserrat = Montserrat({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-montserrat'
})

export default async function RootLayout({
  children,
  params,
}: Readonly<{
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}>) {
  // Ensure that the incoming `locale` is valid
  const { locale } = await params;
  if (!hasLocale(routing.locales, locale)) {
    notFound();
  }

  return (
    <html lang="en">
      <body
        className={
          `${corinthia.variable} ${geist.variable} ${montserrat.variable}`>
        ...
      </body>
    </html>
  );
}

global.css

@theme inline {
  /* Other theme variables... */
  --font-funky: var(--font-corinthia);
  --font-heading: var(--font-montserrat);
  --font-body: var(--font-geist);
  --font-sans: var(--font-geist);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-body;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-heading;
  }
}

// Automatic application (no classes needed)
<h1>This uses Montserrat automatically</h1>
<p>This uses Geist automatically</p>

// Manual application with utility classes
<div className="font-funky">This uses Corinthia</div>
<span className="font-heading">This forces Montserrat</span>
<p className="font-body">This forces Geist</p>