Next.js - Font Component

Quiz

Font components in Next.js are used to implement external custom fonts in a web application. In this chapter we will explore, the Font component, it's syntax, features, arguments and examples.

Font Component in Next.js

In Next.js, the font component is a feature introduced to use custom web fonts and self hosted fonts in a web applications. The 'next/font' package provides utilities to load Google Fonts and custom fonts with automatic optimizations. Next js will ensure fonts are automatically preloaded and optimized to reduce render-blocking requests, which results in better performance.

Features of Font Component

Next.js will remove unused characters from font file, ensuring only the necessary characters are loaded, which minimizes file sizes
It automatically provides fallback fonts to ensure content remains visible while the custom font loads.
For self hosted fonts, no external requests are made. This ensures better reliability and privacy.

Syntax

Following code snippet shows syntax to use font component in Next.js.

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

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

// Use the class name to specify font
<div className={myFont.className}>
    <h1>Hello, Next.js custom Inter font!</h1>
</div>

Arguments of Font Component

Following table give reference to all arguments of font component.

Arguments	Description	Status
src	The source of the font, which is stored locally on device.	Required
weight	The weight of the font, which can be specified as a string or an array.	Required
style	The style of the font, such as italic or normal.	Optional
subsets	An array of subsets for the font, like 'latin' or 'cyrillic'.	Optional
axes	An array specifying the font's variable axes.	Optional
display	The display strategy for the font, such as 'swap' or 'fallback'.	Optional
preload	A boolean indicating if the font should be preloaded.	Optional
fallback	An array of fallback font families.	Optional
adjustFontFallback	Boolean or string to adjust font fallback for better rendering.	Optional
variable	A string to specify a variable font property.	Optional
declarations	An array of objects for custom font declarations.	Optional

Use Google Fonts in Next.js

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.

Use Custom 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