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
tsximport 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.
jsmodule.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.
cssbody {
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? 🚀