Font optimization with next/font in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

The main purpose is to optimize font loading by automatically handling font subsets, preloading, and reducing layout shifts, which improves page speed and user experience.

intermediate

How does next/font help reduce layout shifts caused by fonts?

It preloads fonts and uses font subsets to ensure text renders quickly and consistently, preventing visible changes in text size or style after the page loads.

beginner

Which font types can be optimized using next/font?

You can optimize Google Fonts, local fonts, and custom fonts by importing them through next/font/google or next/font/local.

intermediate

What is the benefit of using font subsets in next/font?

Font subsets load only the characters needed for your content, which reduces font file size and speeds up page loading.

beginner

Show a simple example of importing and using a Google Font with next/font.

Example:
<pre>import { Roboto } from 'next/font/google';
const roboto = Roboto({ subsets: ['latin'], weight: '400' });

export default function Home() {
  return <main className={roboto.className}>Hello with Roboto font!</main>;
}</pre>

What does next/font automatically do to improve font loading?

A Preloads fonts and uses subsets

B Converts fonts to images

C Removes all fonts from the page

D Loads fonts only after user clicks

next/font preloads fonts and uses subsets to speed up loading and reduce layout shifts.

Which import would you use to load a Google Font with next/font?

A import Roboto from 'next/font/remote';

B import Roboto from 'next/font/local';

C import { Roboto } from 'next/font/custom';

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

Google Fonts are imported from 'next/font/google'.

Why are font subsets useful in next/font?

A They load only needed characters to reduce file size

B They add extra characters for all languages

C They disable font loading

D They convert fonts to SVG

Subsets reduce font file size by loading only required characters.

What is a key benefit of using next/font over traditional font loading?

A Fonts are embedded as base64 images

B Fonts load slower but look better

C Improved performance and less layout shift

D Fonts are only loaded on mobile devices

next/font improves performance and reduces layout shifts by smart font loading.

How do you apply a font loaded with next/font to a component?

A Set the font in a CSS file manually

B Use the font's <code>className</code> on an element

C Fonts apply automatically without code

D Use inline styles with font URL

You apply the font by adding the font's className to your element.

Explain how next/font improves font loading and user experience in Next.js.

Think about speed and how fonts appear on the page.

Describe the steps to import and use a Google Font with next/font in a Next.js component.

Focus on import, configuration, and usage.

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