Using Next.js Local Fonts For Faster And Better UI

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:

Copy
/public/fonts/
    ├── Inter-Regular.woff2
    ├── Inter-Bold.woff2
    ├── RobotoMono-Regular.woff2
    ├── 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:

Copy
import localFont from 'next/font/local';

const inter = localFont({
  src: [
    { path: '/fonts/Inter-Regular.woff2', weight: '400', style: 'normal' },
    { path: '/fonts/Inter-Bold.woff2', weight: '700', style: 'normal' },
  ],
  variable: '--font-inter',
});

export 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:

Copy
import inter from './layout';

export const metadata = {
  title: 'Next.js Local Fonts Example',
};

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

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

5. Applying Custom Fonts with Tailwind CSS

If using Tailwind CSS, define the font family inside :

Now, use Tailwind CSS classes to apply the font:

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

Apply both fonts in the layout file:

Then, use different fonts within components:

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

Managing Font Weight and Styles

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

Example: Defining Variable Fonts

Then apply different font weights using Tailwind CSS:

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 . To further enhance font rendering:

1. Use format for smaller file sizes.

2. If you are not using , manually preload fonts inside :

3. Apply for better rendering. Adding 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.

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        inter: ['var(--font-inter)', 'Inter', 'sans-serif'],
      },
    },
  },
};

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

import localFont from 'next/font/local';

const inter = localFont({
  src: '/fonts/Inter-Regular.woff2',
  variable: '--font-inter',
});

const robotoMono = localFont({
  src: '/fonts/RobotoMono-Regular.woff2',
  variable: '--font-roboto-mono',
});

export { inter, robotoMono };

import { inter, robotoMono } from './layout';

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${robotoMono.variable}`}>
      <body>{children}</body>
    </html>
  );
}

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

import localFont from 'next/font/local';

const inter = localFont({
  src: [
    { path: '/fonts/Inter-Regular.woff2', weight: '400' },
    { path: '/fonts/Inter-Medium.woff2', weight: '500' },
    { path: '/fonts/Inter-Bold.woff2', weight: '700' },
  ],
  variable: '--font-inter',
});

export default inter;

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

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