OWolf

AboutBlogProjects
©2025 OWolf.com

Privacy

Contact

Web Development,Typography,Design

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

March 4, 2025

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? 🚀

▊