Topic

Optimize fonts

Definition

next/font self-hosts and optimizes supported font files so pages can avoid a third-party font request and reduce layout shift.

In simpler words

Load the project font through Next so text arrives predictably without asking another site for it.

Typography affects readability and performance because late font swaps can move content after users begin reading.

After this you can

Load a font with next/font
Apply its class or variable at a layout boundary
Avoid shipping unused font weights

Configure fonts once

A font definition is usually created near the root layout and applied through its returned className or CSS variable. This keeps type choices consistent across nested routes.

Request only the weights and styles the design uses. Every additional font file competes with application code, images, and data for network and rendering work.

Apply a font at the root

import { IBM_Plex_Sans } from 'next/font/google';
const plex = IBM_Plex_Sans({ subsets: ['latin'], weight: ['400', '600'] });

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

The layout gives descendant routes a consistent font class.

Mistake: importing a font with CSS @import

/* Wrong — extra third-party request and less control */
@import url('https://fonts.example/font.css');

// Right — configure the font with next/font in the layout

next/font manages font assets as part of the application build.

Make typography a system

Definition

A font choice needs a fallback stack, sensible weight range, and readable line lengths—not just a downloaded file.

In simpler words

Define reusable typography tokens so a heading does not gain a different font rule on every route.

Keep the Course’s IBM Plex typography intentional and consistent.

Check that bold, italic, and numeric data use the weights the application actually loads.

Live playground

Font optimization playground

Apply a returned font class and compare it with an external CSS import.

Configure next/font once near the root layout.

next-font-optimization

Keep in mind

Configure fonts near the root layout.
Load only weights that the UI uses.
Use font variables when the styling system needs a shared token.