Next.js - Font Optimization

Quiz

Font Optimization in Next.js

Next.js provides a built-in library called 'next/font' to optimize usage of fonts in your application. This library also comes with automatic self-hosting for any local font file. This means you can optimally load web fonts with zero layout shift.

The Next.js font system allows you to easily use all Google Fonts with improved performance and privacy features. The font files are downloaded at build time and self-hosted with the rest of the static assets. Hence, your browser need not have to make additional requests to fetch the font files.

Using Fonts in Next.js

In Next.js, we can add web hosted fonts (ie, google fonts) or local fonts to application. To add a Google Font in your Next.js application, first import the specific Google Font from next/font/google, then use the returned className in your component. See the code below:

import { Inter } from 'next/font/google';

// Configure the font
const inter = Inter({
  subsets: ['latin'],  // Subsets to include
  weight: '400',       // Font weight (optional)
});

export default function Home() {
  return (
    <div className={inter.className}>
      <h1>Hello, Next.js with Inter font!</h1>
    </div>
  );
}

Output

The below image shows output of above code. The font applied to text in current component only.

Preloading Fonts in Next.js

When a font function is called on a page of your site, it may not be available globally on all routes. The preloading of fonts on other routes depend on the type of file where the font is used. If the font is used in a -

Layout Page:(/app/layout.tsx) The font will be preloaded on all routes wrapped by the layout.
Component Page: (/app/component/page.tsx) The font will be loaded on the component page only.
Root Page: (/app/index.tsx) The font will be loaded on all routes.

Example

In the code below, we defined a component page (about/page.tsx) and layout page of Next.js. In the component page we are using google fonts.

// File - /app/about/page.tsx

import { Inter } from 'next/font/google';

// Configure the font
const inter = Inter({
  subsets: ['latin'],  // Subsets to include
  weight: '400',       // Font weight (optional)
});

export default function Home() {
  return (
    <div className={inter.className}>
      <h1>Hello, Next.js with Inter font!</h1>
    </div>
  );
}

// File - /app/layout.tsx

import Link from 'next/link' // import linking component
import { ReactNode } from 'react';

export default function RootLayout({ children }: RootLayoutProps) {
return (
    <html lang="en">
        <h1>Next JS Fonts</h1>
        <ul> 
            <li><Link href="/">Home</Link></li> 
            <li><Link href="/contacts/">Contacts</Link></li>
            <li><Link href="/about">About Us</Link></li>
        </ul>
    <main>{children}</main> 
    </html>
);
}

Output

In the output, we can see a new font call is made at backend when we visit /about page of application.

Use Local Fonts in Next.js

To use a locally hosted fonts, use the next/font/local library. Provide the path to the font files using src argument. See the code below.

import localFont from 'next/font/local';

// Configure the local font
const myFont = localFont({
  src: './path/to/font.woff2',  // Path to the font file
  weight: '400',                // Optional weight
  style: 'normal',              // Optional style
});

export default function Home() {
  return (
    <div className={myFont.className}>
      <h1>Hello, Next.js with Inter font!</h1>
    </div>
  );
}

Output

The image below shows output of above code. Custom font are used for h1 element.

Print Page