Add Custom Font in Nextjs 14: A Step-by-Step Guide

Adding a custom font in Next.js 14 takes four steps: load it from next/font, expose it as a CSS variable on <body>, register that variable in Tailwind, then use the class. Next self-hosts the file, so there is no request to Google on load. Here is how I do it.

The step that makes this work is the CSS variable. Without one you can only use the font where you imported it. With it, the font reaches every component in the tree.

Step One: No @next/font Package to Install — Use the Built-in next/font

yarn add @next/font

There is nothing to install. On Next.js 14 the @next/font package has been removed in favour of the built-in next/font, so the import below is next/font/google. The command above is the old step from earlier versions; leave it out. If an older project still imports @next/font, the official codemod renames those imports to next/font for you.

Step Two: Integrate Fonts into Your Base Layout

Go to the layout file that wraps every page. Import your fonts there, and nowhere else:

import { Cinzel_Decorative, Playfair_Display } from "next/font/google";
const playfairDisplay = Playfair_Display({
  subsets: ["latin"],
  variable: "--font-playfairDisplay",
  // weight: ["400", "700", "500", "800", "900"],
});
const cinzelDecorative = Cinzel_Decorative({
  subsets: ["latin"],
  variable: "--font-cinzelDecorative",
  weight: ["400", "700", "900"],
});

Three things in that block decide what you ship:

• subsets — only the character sets you need.
• variable — the CSS custom property name. This is the line that makes the font reachable from Tailwind.
• weight — only the weights you use. It is commented out on the first font and set on the second: a variable font can leave it off, a static font cannot.

Now put the variables on the body tag, so they cascade:

    <html lang="en"><body className={`${playfairDisplay.variable} ${cinzelDecorative.variable}`}>             
            {children}  
      </body></html>

Step Three: Extend Font Family in Tailwind CSS

Open your Tailwind config and extend the font family section:

// tailwind.config.js

extend: {
  fontFamily: {
    "playfairDisplay": 'var(--font-playfairDisplay)',
    "cinzelDecorative": 'var(--font-cinzelDecorative)',
  },
  // Other Tailwind CSS configurations...
},

This turns the variable into a class Tailwind recognises. Miss it and your class silently does nothing — no error, just the default font. That is why it is the first thing I check when a font refuses to show.

Step Four: Use the Custom Font in Next.js 14 Components

Now the class works anywhere:

<div className="col-span-12 lg:col-span-4 border shadow-xl group font-cinzelDecorative"> 
<!-- Your content goes here -->
</div>

That is the whole thing. What takes longer than people expect is choosing the fonts, not wiring them. Two families is usually right: one for headings, one for body.

If the font is not applying, check these before changing anything else:

1. Is the variable string in the loader identical to the one in your Tailwind config? A typo fails silently.
2. Are the variable classes on <body>, not an inner div?
3. Did you import the font in a layout, rather than in the component using it?

Usually it is the first one.