Font optimization with next/font in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Roboto font using next/font.

NextJS

import { [1] } from 'next/font/google';

const roboto = [1]({ subsets: ['latin'] });

Drag options to blanks, or click blank then click option'

Aroboto

BRoboto

CFontRoboto

DGoogleFont

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase font name like 'roboto' causes import errors.

Trying to import a non-existent named export.

The correct import is Roboto from next/font/google. It matches the font name exactly.

2fill in blank

medium

Complete the code to apply the imported font's className to a div.

NextJS

export default function Home() {
  return <div className=[1]>Hello World</div>;
}

Drag options to blanks, or click blank then click option'

ARoboto.className

BrobotoClass

Croboto.className

Droboto.classname

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect casing like 'classname' instead of 'className'.

Using a variable name that does not exist.

The font object has a className property to apply the font styles. It is accessed as roboto.className.

3fill in blank

hard

Fix the error in the font import statement.

NextJS

import [1] from 'next/font/google';

Drag options to blanks, or click blank then click option'

Aroboto

BRoboto

C{Roboto}

D{ Roboto }

Attempts:

3 left

💡 Hint

Common Mistakes

Using default import syntax without braces.

Using lowercase font name in import.

The import must use named import syntax with curly braces: { Roboto }.

4fill in blank

hard

Fill both blanks to import and configure the Inter font with weight 400.

NextJS

import [1] from 'next/font/google';

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

Drag options to blanks, or click blank then click option'

A{ Inter }

BInter

C{ inter }

Dinter

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase in import braces.

Calling the wrong function name.

Import uses named import { Inter }. Then call Inter to configure the font.

5fill in blank

hard

Fill all three blanks to create a custom font with variable and apply its className in JSX.

NextJS

import [1] from 'next/font/google';

const customFont = [2]({ subsets: ['latin'] });

export default function Page() {
  return <main className=[3]>Welcome</main>;
}

Drag options to blanks, or click blank then click option'

A{ Lato }

BLato

CcustomFont.className

DLatoFont

Attempts:

3 left

💡 Hint

Common Mistakes

Using default import instead of named import.

Using wrong variable name for className.

Forgetting to use className property.

Import the font as named import { Lato }, call Lato to create the font object, then use customFont.className in JSX.

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