Font optimization with next/font in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered font style when using next/font with Google Fonts?

Consider this Next.js component using next/font/google to load the Roboto font:

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

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

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

What font style will the text inside <main> have?

NextJS

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

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

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

A The text will use Roboto but with bold weight because weight '400' is ignored.

B The text will use the default system font because next/font/google does not load fonts automatically.

C The text will use the Roboto font with normal weight and latin subset loaded.

D The text will not render because the className is undefined.

💡 Hint

Check how the Roboto function from next/font/google is used and what the className property does.

Using next/font/google with the Roboto function loads the font with specified options. The className property applies the font style to the element. Weight '400' means normal weight, and the latin subset is loaded as requested.

📝 Syntax

intermediate

Which next/font/google import syntax is correct for loading multiple weights?

You want to load the Inter font with weights 400 and 700 using next/font/google. Which import and usage syntax is correct?

A

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

B

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

C

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

D

import { Inter } from 'next/font/google';
const inter = Inter({ weight: 400 || 700, subsets: ['latin'] });

💡 Hint

Check the property name and value type for specifying multiple weights in the font options.

The correct property is weight (singular) and it accepts an array of strings for multiple weights. Option A uses the correct syntax.

🔧 Debug

advanced

Why does this next/font/local font fail to apply styles?

Given this code snippet using next/font/local:

import localFont from 'next/font/local';

const myFont = localFont({
  src: './fonts/MyFont.woff2',
  weight: '400',
  style: 'normal'
});

export default function Page() {
  return <div className={myFont.className}>Test Text</div>;
}

The font styles do not apply in the browser. What is the most likely cause?

NextJS

import localFont from 'next/font/local';

const myFont = localFont({
  src: './fonts/MyFont.woff2',
  weight: '400',
  style: 'normal'
});

export default function Page() {
  return <div className={myFont.className}>Test Text</div>;
}

A The className property is not available on the object returned by localFont.

B The weight property must be a number, not a string.

C The localFont function requires an array for the src property, not a string.

D The relative path './fonts/MyFont.woff2' is incorrect or the file is missing.

💡 Hint

Check the file path and existence of the font file relative to the component.

If the font file path is wrong or the file is missing, the font cannot load and styles won't apply. The other options are incorrect because weight as string is allowed, src can be a string or array, and className is provided.

❓ state_output

advanced

What is the effect of using next/font with variable fonts on page size?

You use a variable font with next/font/google like this:

import { Roboto_Flex } from 'next/font/google';

const robotoFlex = Roboto_Flex({ subsets: ['latin'] });

export default function Home() {
  return <main className={robotoFlex.className}>Hello</main>;
}

What is the expected effect on the page size and font loading compared to loading multiple static weights?

NextJS

import { Roboto_Flex } from 'next/font/google';

const robotoFlex = Roboto_Flex({ subsets: ['latin'] });

export default function Home() {
  return <main className={robotoFlex.className}>Hello</main>;
}

A The page size is larger because variable fonts include all weights and styles by default.

B The page size is smaller because the variable font loads once and covers many weights and styles.

C The page size is the same as loading a single static weight font.

D The font does not load because variable fonts are not supported by next/font.

💡 Hint

Think about how variable fonts bundle multiple styles in one file.

Variable fonts load a single font file that can represent many weights and styles, reducing total page size compared to loading multiple static font files.

🧠 Conceptual

expert

How does next/font optimize font loading for accessibility and performance?

Which of the following best describes how next/font improves font loading in Next.js apps?

A It automatically inlines critical font CSS, preloads fonts, and avoids layout shifts by applying font classes at build time.

B It loads fonts only on user interaction to reduce initial load time but may cause layout shifts.

C It bundles all font files into JavaScript to reduce HTTP requests but increases JS size.

D It disables font loading on slow connections to improve accessibility.

💡 Hint

Consider how next/font handles font CSS and rendering to improve user experience.

Next/font extracts and inlines critical font CSS, preloads fonts to avoid delays, and applies font classes early to prevent layout shifts, improving both accessibility and performance.