Font optimization with next/font in NextJS - Step-by-Step Execution

Concept Flow - Font optimization with next/font

Import next/font

↓

Select font source (Google/local)

↓

Configure font with options

↓

Use font in component styles

↓

Next.js optimizes font loading

↓

Page renders with optimized fonts

This flow shows how you import and configure fonts with next/font, then use them in your components, letting Next.js optimize font loading automatically.

Execution Sample

NextJS

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

const roboto = Roboto({ subsets: ['latin'], weight: '400' });

export default function Home() {
  return <main className={roboto.className}>Hello World</main>;
}

This code imports the Roboto font from Google, configures it, and applies it to a page's main element.

Execution Table

Step	Action	Evaluation	Result
1	Import Roboto from next/font/google	Roboto function available	Roboto font loader ready
2	Call Roboto({ subsets: ['latin'], weight: '400' })	Font config created	roboto object with className and preload info
3	Render Home component	JSX evaluated	<main> element with roboto.className applied
4	Next.js detects font usage	Font optimization triggered	Preloads Roboto font with specified subsets and weight
5	Browser loads page	Font files fetched efficiently	Text rendered with Roboto font
6	Page fully loaded	Fonts cached for future use	Fast font display on next visits

💡 All steps complete, font optimized and applied successfully

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
roboto	undefined	{ subsets: ['latin'], weight: '400', className: '...' }	{ subsets: ['latin'], weight: '400', className: '...' }	{ subsets: ['latin'], weight: '400', className: '...' }

Key Moments - 2 Insights

Why do we use roboto.className in the JSX instead of a normal CSS class?

roboto.className is generated by next/font to apply the optimized font styles automatically, as shown in execution_table step 3.

How does Next.js know which font files to preload?

Next.js reads the font configuration object (step 2) and triggers font optimization (step 4) to preload only the needed subsets and weights.

Visual Quiz - 3 Questions

Look at the execution table, what is the result of step 2?

A Browser loads font files

B roboto object with className and preload info

C JSX evaluated with font applied

D Font optimization triggered

💡 Hint

Check the 'Result' column for step 2 in the execution_table

At which step does Next.js start optimizing font loading?

A Step 1

B Step 3

C Step 4

D Step 5

💡 Hint

Look for 'Font optimization triggered' in the 'Evaluation' column

If you change the weight option from '400' to '700', what changes in the execution?

A roboto object will preload weight 700 fonts instead of 400

B JSX will not render

C Next.js will ignore the change

D Browser will load all font weights

💡 Hint

Refer to variable_tracker and execution_table step 2 about font config

Concept Snapshot

Import fonts from next/font (Google/local)
Configure font with options like subsets and weight
Use generated className in JSX elements
Next.js preloads and optimizes font loading automatically
Result: faster font loading and better performance

Full Transcript

Font optimization with next/font in Next.js involves importing a font from next/font/google or next/font/local, configuring it with options such as subsets and weight, and then applying the generated className to your JSX elements. Next.js detects this usage and automatically preloads and optimizes the font files needed for your page. This process improves page load speed and font rendering quality. The example code imports Roboto font with latin subset and weight 400, then uses roboto.className on the main element. The execution steps show how the font config is created, how Next.js triggers optimization, and how the browser loads the font efficiently.

Practice

1. What is the main purpose of using next/font in a Next.js application?

easy

A. To convert fonts into images for display

B. To create custom font files from scratch

C. To optimize font loading for better performance and user experience

D. To disable all fonts and use system defaults only

Solution

1. Step 1: Understand the role of next/font

   next/font is designed to load fonts efficiently in Next.js apps, improving speed and user experience.

2. Step 2: Compare options with this purpose

   Only To optimize font loading for better performance and user experience describes optimization of font loading, which matches the purpose of next/font.

3. Final Answer:

   To optimize font loading for better performance and user experience -> Option C

4. Quick Check:

   Font optimization = To optimize font loading for better performance and user experience [OK]

Hint: Remember: next/font improves font loading speed [OK]

Common Mistakes:

• Thinking next/font creates fonts
• Confusing font optimization with image conversion
• Assuming next/font disables fonts

2. Which of the following is the correct way to import the Inter font from Google Fonts using next/font/google?

easy

A. import Inter from 'next/font/google'; const inter = new Inter();

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

C. const inter = require('next/font/google').Inter();

D. import { Inter } from 'next/font/local'; const inter = Inter();

Solution

1. Step 1: Check the import syntax for Google Fonts

   The correct import uses named import from 'next/font/google' and calls the font function with options.

2. Step 2: Validate the usage

   import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] }); matches the correct pattern: import with braces, call with options object.

3. Final Answer:

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

4. Quick Check:

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

Hint: Use named import and call font as a function with options [OK]

Common Mistakes:

• Using default import instead of named import
• Using require instead of import
• Importing from 'next/font/local' for Google Fonts

3. Given this code snippet in a Next.js component:

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

export default function Home() {
  return <main className={inter.className}>Hello World</main>;
}

What will be the effect of using inter.className in the <main> element?

medium

A. It adds a random CSS class unrelated to fonts

B. It causes a runtime error because className is undefined

C. It applies default system fonts ignoring Inter

D. It applies the Inter font styles optimized and loaded by next/font

Solution

1. Step 1: Understand what inter.className provides

   The Inter font function returns an object with a className property that applies the optimized font styles.

2. Step 2: Check usage in the component

   Using className={inter.className} applies the Inter font styles to the <main> element.

3. Final Answer:

   It applies the Inter font styles optimized and loaded by next/font -> Option D

4. Quick Check:

   inter.className applies optimized font styles = It applies the Inter font styles optimized and loaded by next/font [OK]

Hint: className from next/font applies the font styles [OK]

Common Mistakes:

• Assuming className is undefined
• Thinking it applies system fonts instead
• Confusing className with inline styles

4. Identify the error in this code snippet that tries to load a local font with next/font/local:

import localFont from 'next/font/local';

const myFont = localFont({
  src: './fonts/MyFont.ttf',
  weight: '400',
  style: 'normal'
});

export default function Page() {
  return <div className={myFont.className}>Sample Text</div>;
}

medium

A. The src path must be an array, not a string

B. The weight property should be a number, not a string

C. The import should use braces: { localFont }

D. The style property is not supported in local fonts

Solution

1. Step 1: Check the src property format for localFont

   Local fonts require src to be an array of objects with path and weight, not a single string.

2. Step 2: Validate other properties

   Weight can be string or number, import default is correct, style is supported.

3. Final Answer:

   The src path must be an array, not a string -> Option A

4. Quick Check:

   Local font src requires array = The src path must be an array, not a string [OK]

Hint: Local font src must be an array of objects [OK]

Common Mistakes:

• Using string instead of array for src
• Misusing import syntax with braces
• Assuming style is unsupported

5. You want to load two Google Fonts, Roboto and Open Sans, both with latin subsets, and apply them to different parts of your Next.js page. Which approach correctly uses next/font/google to optimize both fonts and apply them separately?

hard

A. import { Roboto, Open_Sans } from 'next/font/google';
const roboto = Roboto({ subsets: ['latin'] });
const openSans = Open_Sans({ subsets: ['latin'] });

export default function Page() {
return <>
<header className={roboto.className}>Header Text</header>
<main className={openSans.className}>Main Text</main>
</>;
}

B. }
;;tg&/;tl&
;tg&niam/;tl&txeT niaM;tg&}emaNssalc.snaSnepo{=emaNssalc niam;tl&
;tg&redaeh/;tl&txeT redaeH;tg&}emaNssalc.otobor{=emaNssalc redaeh;tl&
;tg&;tl& nruter
{ )(egaP noitcnuf tluafed tropxe

;)} ]'nital'[ :stesbus {(snaS_nepO = snaSnepo tsnoc
;)} ]'nital'[ :stesbus {(otoboR = otobor tsnoc
;'elgoog/tnof/txen' morf } snaS_nepO ,otoboR { tropmi

C. import Roboto from 'next/font/google';
import OpenSans from 'next/font/google';
const roboto = Roboto({ subsets: ['latin'] });
const openSans = OpenSans({ subsets: ['latin'] });

export default function Page() {
return <>
<header className={roboto.className}>Header Text</header>
<main className={openSans.className}>Main Text</main>
</>;
}

D. import { Roboto, OpenSans } from 'next/font/google';
const roboto = Roboto({ subsets: ['latin'] });
const openSans = OpenSans({ subsets: ['latin'] });

export default function Page() {
return <div className={`${roboto.className} ${openSans.className}`}>Combined Text</div>;
}

Solution

1. Step 1: Check correct font names and import syntax

   Font names must match exact exported names from next/font/google. 'OpenSans' is correct, 'Open_Sans' is not.

2. Step 2: Verify usage of separate classNames

   Applying separate classNames to different elements is correct for different fonts.

3. Step 3: Review other options

   import { Roboto, Open_Sans } from 'next/font/google'; const roboto = Roboto({ subsets: ['latin'] }); const openSans = Open_Sans({ subsets: ['latin'] }); export default function Page() { return <> <header className={roboto.className}>Header Text</header> <main className={openSans.className}>Main Text</main> </>; } uses wrong font name 'Open_Sans'. import Roboto from 'next/font/google'; import OpenSans from 'next/font/google'; const roboto = Roboto({ subsets: ['latin'] }); const openSans = OpenSans({ subsets: ['latin'] }); export default function Page() { return <> <header className={roboto.className}>Header Text</header> <main className={openSans.className}>Main Text</main> </>; } uses default imports incorrectly. import { Roboto, OpenSans } from 'next/font/google'; const roboto = Roboto({ subsets: ['latin'] }); const openSans = OpenSans({ subsets: ['latin'] }); export default function Page() { return <div className={`${roboto.className} ${openSans.className}`}>Combined Text</div>; } combines both fonts on one element, not separately.

4. Final Answer:

   Use named imports with correct font names and apply classNames separately -> Option A

5. Quick Check:

   Correct font names and separate usage = import { Roboto, OpenSans } from 'next/font/google'; const roboto = Roboto({ subsets: ['latin'] }); const openSans = OpenSans({ subsets: ['latin'] }); export default function Page() { return <> <header className={roboto.className}>Header Text</header> <main className={openSans.className}>Main Text</main> </>; } [OK]

Hint: Use exact font names and apply className separately [OK]

Common Mistakes:

• Using incorrect font names with underscores
• Using default imports instead of named imports
• Combining multiple fonts on one element incorrectly