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.

Open official example (opens in new tab)

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.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. Why next/font?

Concept

It injects <link> tags to Google Fonts at runtime for youSelf-host/optimize fonts to improve privacy and performanceIt converts fonts into icon components you can useIt lazy-loads fonts only after the page is interactive

2. Applying a font?

Syntax

Import Inter from next/font and add <Inter /> to the treeSet the font in next.config under a fonts optionconst inter = Inter({ subsets: ['latin'] }); className={inter.className}Call useFont("Inter") inside the component

3. subsets purpose?

Practical

Select which font weights are downloadedLoad only needed character setsSplit the font file across multiple network requestsChoose which pages the font applies to

4. variable fonts?

Logic

Supported, but you must list every weight explicitlySupported — fewer files for many weights sometimesSupported only with next/font/local, not Google fontsSupported only through CSS variables you define manually

5. Avoid layout shift how?

Concept

Add font-display: swap through a manual <link> tagUse next/font so metrics are available and applied consistentlyHide the text with visibility: hidden until the font loadsWrap text in a Suspense boundary until the font is ready

6. Local font files?

Practical

next/font/google with a file path in the src optionnext/font/local for project font filesImport the .woff2 directly and pass it to next/imagePlace the font in public/ and reference it by URL

7. Where apply root font?

Syntax

In next.config so it applies globallyRoot layout body/html classNameIn a global.css file via @font-faceOn each page.tsx wrapper element individually

8. Multiple fonts?

Logic

Combine them into one loader call with an array of namesOnly one next/font call is allowed per applicationDefine more than one and apply where neededImport extra fonts through global CSS @import instead

9. Privacy angle?

Concept

next/font proxies the Google request through your server each loadIt encrypts the font request so Google can’t read the IPSelf-hosting avoids extra third-party font requestsIt blocks all third-party cookies on the page

10. Which practice matches Next guidance?

Practical

Add a <link> to Google Fonts in the root layout headImport fonts via CSS @import at the top of globals.cssUse next/font instead of ad-hoc <link> font spam when possibleLoad fonts with a client-side FontFace API call on mount

11. What does next/font do here?

Conceptintermediate

import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });

Fetches the font from Google’s CDN on each page loadRegisters the font globally without any bundlingGenerates a <link rel="stylesheet"> to fonts.googleapis.comSelf-hosts and optimizes the font for performance and privacy

12. What does applying inter.className do?

Syntaxintermediate

<body className={inter.className}>

Injects a <style> tag defining @font-face at runtimeSets a CSS variable you still must reference manuallyPreloads the font but doesn’t apply it until hoverApplies the optimized font to the element

13. What does the subsets option control?

Practicaladvanced

Inter({ subsets: ['latin'] });

Which font weights are bundled into the appWhich routes the font is applied toWhich character sets are downloaded, reducing font payloadHow the font is split across CSS files

14. When do you use next/font/local?

Logicadvanced

import localFont from 'next/font/local';
const brand = localFont({ src: './Brand.woff2' });

For any Google font not covered by next/font/googleFor font files you ship in your own projectFor fonts hosted on a remote CDN you controlFor system fonts already installed on the user’s device

15. What does next/font improve over manual link tags?

Conceptintermediate

// <head> with three <link> font stylesheets

It loads fonts faster by keeping the Google CDN connection openIt defers font loading until after hydration completesAutomatic optimization and reduced layout shift without ad-hoc link spamIt lets you switch fonts at runtime without a rebuild

Checking your session…