Font optimization with next/font in NextJS - Performance & Optimization

Performance: Font optimization with next/font

HIGH IMPACT

This affects page load speed by optimizing font delivery and rendering, reducing blocking time and layout shifts.

Loading custom fonts in a Next.js app

NextJS

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

export default function App({ Component, pageProps }) {
  return <main className={inter.variable}><Component {...pageProps} /></main>;
}

next/font automatically optimizes font loading with preloading, subsets, and no layout shifts.

📈 Performance GainReduces LCP by preloading fonts, eliminates CLS from font swapping

Loading custom fonts in a Next.js app

NextJS

import '../styles/globals.css';
// In globals.css
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/customfont.woff2') format('woff2');
  font-display: swap;
}

// Use font-family: 'CustomFont' in CSS

This approach loads fonts via CSS, causing render-blocking and potential layout shifts as fonts load asynchronously.

📉 Performance CostBlocks rendering until font is downloaded, causes CLS due to font swap

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
CSS @font-face with font-display: swap	Minimal DOM impact	Triggers reflow on font swap	Paint cost on font swap	[!] OK
next/font with automatic preload and subset	Minimal DOM impact	Single reflow during initial layout	Reduced paint cost	[OK] Good

Rendering Pipeline

Font loading affects the critical rendering path by blocking text rendering until fonts are ready or fallback fonts are used. next/font preloads fonts and injects CSS to minimize layout shifts and reflows.

→Critical Rendering Path

→Style Calculation

→Layout

→Paint

⚠️ BottleneckCritical Rendering Path blocking due to font download and layout shifts during font swap

Core Web Vital Affected

LCP, CLS

This affects page load speed by optimizing font delivery and rendering, reducing blocking time and layout shifts.

Optimization Tips

1Always preload fonts to reduce blocking time on text rendering.

2Use font-display strategies to avoid layout shifts caused by font swapping.

3Leverage next/font to automatically optimize font subsets and loading.

Performance Quiz - 3 Questions

What is the main performance benefit of using next/font in Next.js?

A Automatic font preloading and reduced layout shifts

B Larger font file sizes for better quality

C Delays font loading until after page load

D Disables font fallback to speed up rendering

DevTools: Performance

How to check: Record a page load in the Performance panel, then look for font download timing and layout shifts in the summary.

What to look for: Check for reduced blocking time on font download and minimal layout shifts (CLS) during text rendering.

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