Next.js Local Fonts: A Complete Guide For Developers

Want better performance and smoother fonts in your Next.js app?

Many developers use Google Fonts, but loading them from an external source can slow things down. Local fonts give you more control, reduce external requests, and improve visual stability.

With Next.js local fonts, you can manage custom fonts easily, speed up rendering, and reduce layout shifts. This guide walks you through adding local fonts, setting up styles, and using them with Tailwind CSS. You’ll also learn how to handle multiple fonts without hassle.

Let’s get started!

Why Use Local Fonts in Next.js?

Loading fonts locally in Next.js provides several benefits:

• Improved Performance: Reduces external HTTP requests to Google Fonts or other web font providers.

• Greater Control: Customize font styles, font-weight variations, and CSS variable settings as needed.

• Reduced Layout Shift: Ensures visual stability by avoiding delays caused by web fonts loading asynchronously.

Setting Up Local Fonts in Next.js

1. Organizing Font Files in the Project

Before defining a custom local font, store the font files in a structured way. A common approach is to place them inside the public directory:

1/public/fonts/
2    ├── Inter-Regular.woff2
3    ├── Inter-Bold.woff2
4    ├── RobotoMono-Regular.woff2
5    ├── RobotoMono-Bold.woff2

The public folder serves static assets directly from the root directory, making it a suitable location for storing font files.

Next.js serves files from the /public folder at the root URL. For example, a font stored at /public/fonts/Inter-Regular.woff2 is accessible via /fonts/Inter-Regular.woff2 in the browser.

2. Installing Next Font Local

next/font/local is built into Next.js 13+ and doesn’t require additional installation.

3. Importing Custom Local Fonts in Next.js

To define a custom local font, use next/font/local. This ensures that font files are preloaded and applied efficiently.

Example: Importing a Local Font in Next.js

Create a new font configuration inside the app/layout.tsx file:

1import localFont from 'next/font/local';
2
3const inter = localFont({
4  src: [
5    { path: '/fonts/Inter-Regular.woff2', weight: '400', style: 'normal' },
6    { path: '/fonts/Inter-Bold.woff2', weight: '700', style: 'normal' },
7  ],
8  variable: '--font-inter',
9});
10
11export default inter;

This import statement defines the font family and font weight variations, making it accessible throughout the Next.js app.

4. Using Custom Fonts in Next.js Components

Once imported, the font can be applied globally or within specific components.

Example: Applying the Font in _app.tsx

Modify the root layout file to include the font in the html element:

1import inter from './layout';
2
3export const metadata = {
4  title: 'Next.js Local Fonts Example',
5};
6
7export default function RootLayout({ children }: { children: React.ReactNode }) {
8  return (
9    <html lang="en" className={inter.variable}>
10      <body>{children}</body>
11    </html>
12  );
13}

The html lang attribute ensures proper language settings, while the inter.variable CSS variable makes the font available globally.

5. Applying Custom Fonts with Tailwind CSS

If using Tailwind CSS, define the font family inside tailwind.config.js:

1module.exports = {
2  theme: {
3    extend: {
4      fontFamily: {
5        inter: ['var(--font-inter)', 'Inter', 'sans-serif'],
6      },
7    },
8  },
9};

Now, use Tailwind CSS classes to apply the font:

1export default function HomePage() {
2  return <h1 className="font-inter text-2xl">Hello, Next.js Local Fonts</h1>;
3}

This integrates the custom local font seamlessly with Tailwind CSS.

Using Multiple Fonts in Next.js

When adding multiple fonts, define each font separately with unique CSS variables.

Example: Importing Multiple Fonts

1import localFont from 'next/font/local';
2
3const inter = localFont({
4  src: '/fonts/Inter-Regular.woff2',
5  variable: '--font-inter',
6});
7
8const robotoMono = localFont({
9  src: '/fonts/RobotoMono-Regular.woff2',
10  variable: '--font-roboto-mono',
11});
12
13export { inter, robotoMono };

Apply both fonts in the layout file:

1import { inter, robotoMono } from './layout';
2
3export default function RootLayout({ children }) {
4  return (
5    <html lang="en" className={`${inter.variable} ${robotoMono.variable}`}>
6      <body>{children}</body>
7    </html>
8  );
9}

Then, use different fonts within components:

1export default function Typography() {
2  return (
3    <div>
4      <h1 className="font-inter text-3xl">Inter Font</h1>
5      <p className="font-roboto-mono text-lg">Roboto Mono Font</p>
6    </div>
7  );
8}

This setup ensures both fonts are loaded efficiently and applied correctly.

Managing Font Weight and Styles

Different font weights can be defined inside next/font/local. Use the weight property to specify different styles.

Example: Defining Variable Fonts

1import localFont from 'next/font/local';
2
3const inter = localFont({
4  src: [
5    { path: '/fonts/Inter-Regular.woff2', weight: '400' },
6    { path: '/fonts/Inter-Medium.woff2', weight: '500' },
7    { path: '/fonts/Inter-Bold.woff2', weight: '700' },
8  ],
9  variable: '--font-inter',
10});
11
12export default inter;

Then apply different font weights using Tailwind CSS:

1export default function Page() {
2  return (
3    <div>
4      <h1 className="font-inter font-bold text-4xl">Bold Inter</h1>
5      <p className="font-inter font-medium text-lg">Medium Inter</p>
6      <p className="font-inter font-normal text-base">Regular Inter</p>
7    </div>
8  );
9}

This approach ensures consistent font styles across the application.

Handling Font Optimization in Next.js

Font optimization plays a key role in improving web performance. Next.js automatically optimizes local fonts when using next/font/local. To further enhance font rendering:

Use woff2 format for smaller file sizes.
If you are not using next/font/local, manually preload fonts inside _document.tsx:

1<link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />

Apply font-display: swap for better rendering. Adding font-display: swap ensures text remains visible while the font loads. This prevents blank text (FOIT - Flash of Invisible Text) and improves user experience.

These techniques reduce layout shift and improve visual stability.

Improve Performance With Next.js Local Fonts

Next.js local fonts help improve loading speed and font stability. They reduce layout shifts and give better control over typography.

By setting up font files correctly and using next/font/local, custom fonts load smoothly. Tailwind CSS makes styling easier.

A well-structured approach improves both performance and user experience. With these steps, fonts will look great and load fast in any Next.js project.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.

Using Next.js Local Fonts For Faster And Better UI

Rakesh Purohit

About the Author

Rakesh Purohit

Frequently asked questions

How to add a local font in Next.js?

How do I import fonts locally?

How do I find local fonts?

How do I install a font locally?

Read More

Using Next.js Local Fonts For Faster And Better UI

Rakesh Purohit

About the Author

Rakesh Purohit

Frequently asked questions

How to add a local font in Next.js?

How do I import fonts locally?

How do I find local fonts?

How do I install a font locally?

Read More

Why Use Local Fonts in Next.js?

Setting Up Local Fonts in Next.js

1. Organizing Font Files in the Project

2. Installing Next Font Local

3. Importing Custom Local Fonts in Next.js

4. Using Custom Fonts in Next.js Components

5. Applying Custom Fonts with Tailwind CSS

Using Multiple Fonts in Next.js

Example: Importing Multiple Fonts

Managing Font Weight and Styles

Example: Defining Variable Fonts

Handling Font Optimization in Next.js

Improve Performance With Next.js Local Fonts

Short on time? Speed things up with DhiWise!