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.