OWolf

2025-03-05 Web Development, Typography, Design

How to Install and Use Local Fonts in Next.js 15

By O. Wolfson

This guide explains how to install and use local fonts in a Next.js 15 project:

  • A sans-serif font as the default text font.
  • A display font for headlines.

1. Add Font Files to public/fonts/

Place your font files in the /public/fonts/ directory.

/public/fonts/
├── sans/
│   ├── Sans-Regular.woff2
│   ├── Sans-Bold.woff2
│   ├── Sans-Italic.woff2
├── display/
│   ├── Display-Bold.woff2

2. Load Fonts in layout.tsx

Next.js provides the next/font/local module to load local fonts efficiently.

Modify layout.tsx

tsx
import localFont from "next/font/local";
import "./globals.css";

// Load Sans as the default font
const sans = localFont({
  src: [
    { path: "/fonts/sans/Sans-Regular.woff2", weight: "400", style: "normal" },
    { path: "/fonts/sans/Sans-Italic.woff2", weight: "400", style: "italic" },
    { path: "/fonts/sans/Sans-Bold.woff2", weight: "700", style: "normal" },
  ],
  variable: "--font-sans",
});

// Load Display font for headlines
const display = localFont({
  src: "/fonts/display/Display-Bold.woff2",
  weight: "700",
  style: "normal",
  variable: "--font-display",
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${sans.variable} ${display.variable}`}>
      <body>{children}</body>
    </html>
  );
}

3. Set Fonts in Tailwind (tailwind.config.js)

Extend Tailwind's fontFamily to use these fonts.

js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: "var(--font-sans), sans-serif",
        display: "var(--font-display), sans-serif",
      },
    },
  },
};

4. Apply Fonts in globals.css

Define global styles so that:

  • Sans-serif is used by default.
  • Display font is applied to headlines.
css
body {
  font-family: var(--font-sans), sans-serif;
  letter-spacing: 0.04em; /* Adjust spacing if needed */
}

h1, h2 {
  font-family: var(--font-display), sans-serif;
  letter-spacing: 0em; /* Adjust spacing if needed */
}

5. Use in Components

Tailwind will automatically apply these fonts. If needed, you can override them:

tsx
<p className="font-sans">This uses the default sans-serif font.</p>
<h1 className="font-display text-4xl">This uses the display font.</h1>

Final Setup Summary

✔ Fonts stored in /public/fonts/
✔ Loaded via next/font/local in layout.tsx
✔ Tailwind extended to recognize font-sans and font-display
✔ Applied globally in globals.css

Now, your project has a default sans-serif font for body text and a display font for headlines, applied automatically.

Would you like any refinements? 🚀