Font optimization and self-hosting in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a Google font using Next.js font optimization.

NextJS

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

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

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

AOpen_Sans

BInter

CLato

DRoboto

Attempts:

3 left

💡 Hint

Common Mistakes

Using a font name not exported by 'next/font/google'.

Forgetting to import the font before using it.

Next.js provides built-in support to import Google fonts using the exact font name as a function from 'next/font/google'.

2fill in blank

medium

Complete the code to apply the imported font to a Next.js component.

NextJS

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

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

Aroboto

Binter

Clato

DopenSans

Attempts:

3 left

💡 Hint

Common Mistakes

Using the font name as a string instead of the variable.

Forgetting to use .className to apply styles.

The imported font object has a className property to apply the font styles to elements.

3fill in blank

hard

Fix the error in the code to self-host a local font in Next.js.

NextJS

import localFont from 'next/font/local';

const myFont = localFont({ src: '[1]' });

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

A'./fonts/my-font.woff2'

B'/fonts/my-font.woff2'

C'fonts/my-font.woff2'

D'/public/fonts/my-font.woff2'

Attempts:

3 left

💡 Hint

Common Mistakes

Including '/public' in the path which is not needed.

Using relative paths like './fonts' which won't work.

The src path for local fonts should be relative to the public folder, starting with '/fonts/'.

4fill in blank

hard

Fill both blanks to configure a Google font with weight and style options in Next.js.

NextJS

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

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

A400

B700

Cnormal

Ditalic

Attempts:

3 left

💡 Hint

Common Mistakes

Using numbers instead of strings for weight.

Using 'normal' style when italic is intended.

Weights are numeric strings like '400', and styles are strings like 'normal' or 'italic'.

5fill in blank

hard

Fill all three blanks to create a self-hosted font with multiple weights and styles in Next.js.

NextJS

const myFont = localFont({
  src: [
    { path: '/fonts/myFont-Regular.woff2', weight: '[1]', style: '[2]' },
    { path: '/fonts/myFont-Bold.woff2', weight: '[3]', style: 'normal' },
  ],
});

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

A400

B700

Cnormal

Ditalic

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up weight numbers for regular and bold.

Using 'italic' style for bold when not intended.

Regular weight is '400' with 'normal' style; bold weight is '700' with 'normal' style.