Font optimization and self-hosting in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered font style when using Next.js built-in font optimization with a self-hosted font?

Consider a Next.js app that uses the next/font/local to load a self-hosted font with font optimization enabled. What will be the visible effect on the page's text?

NextJS

import localFont from 'next/font/local';

const myFont = localFont({
  src: './fonts/MyFont.woff2',
  display: 'swap',
});

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

A The text uses the self-hosted font with a fallback font until the font loads, then swaps to the custom font.

B The text immediately shows invisible content until the font fully loads, then appears with the custom font.

C The text uses the system default font and never switches to the self-hosted font.

D The text uses the self-hosted font but does not apply any fallback font during loading.

💡 Hint

Think about the display: 'swap' option and how it affects font loading behavior.

Using display: 'swap' causes the browser to use a fallback font immediately and swap to the custom font once it loads, preventing invisible text.

📝 Syntax

intermediate

Which code snippet correctly imports and uses a Google font with Next.js font optimization?

Identify the correct way to import and apply the Inter font from Google Fonts using Next.js built-in font optimization.

A

import { Inter } from 'next/font/google';
const inter = Inter('latin');
export default function Page() {
  return <div className={inter.className}>Text</div>;
}

B

import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export default function Page() {
  return <div className={inter.className}>Text</div>;
}

C

import Inter from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export default function Page() {
  return <div className={inter.className}>Text</div>;
}

D

import { Inter } from 'next/font/google';
const inter = Inter({ weights: ['400'] });
export default function Page() {
  return <div className={inter.className}>Text</div>;
}

💡 Hint

Check the correct import syntax and the expected options object for subsets.

The correct import uses named import { Inter } and the options object must specify subsets as an array.

🔧 Debug

advanced

Why does the self-hosted font not apply styles in this Next.js component?

Given this code, the custom font does not appear on the page. What is the most likely cause?

NextJS

import localFont from 'next/font/local';

const myFont = localFont({
  src: './fonts/CustomFont.woff2',
});

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

A The component must wrap the text in a <span> for the font class to apply.

B The font file format '.woff2' is not supported by Next.js font optimization.

C The localFont function requires a 'weight' property to apply styles.

D The font file path is incorrect; it should not include 'public' because Next.js serves 'public' as root.

💡 Hint

Remember how Next.js handles the public folder for static assets.

Next.js serves files in public folder at the root URL, so the path should be relative to the file, not including 'public'.

❓ state_output

advanced

What is the effect on page load performance when using Next.js font optimization with Google Fonts?

When you import Google Fonts using Next.js built-in font optimization, what happens to the font loading and page performance?

A Fonts are preloaded and inlined in CSS, reducing layout shifts and improving performance.

B Fonts are loaded via external Google CDN links, causing slower page loads.

C Fonts are bundled with JavaScript, increasing JS bundle size and slowing rendering.

D Fonts are downloaded only after the page fully loads, causing invisible text initially.

💡 Hint

Think about how Next.js optimizes font loading to improve user experience.

Next.js preloads fonts and injects CSS to avoid layout shifts and speed up font rendering.

🧠 Conceptual

expert

Which statement best describes the difference between self-hosted fonts and Google Fonts in Next.js font optimization?

Choose the most accurate description of how Next.js handles self-hosted fonts versus Google Fonts with its font optimization feature.

A Google Fonts must be downloaded and stored locally, whereas self-hosted fonts are fetched from Google CDN automatically.

B Both self-hosted and Google Fonts require manual CSS @font-face declarations in Next.js for optimization.

C Self-hosted fonts require manual file management and local paths, while Google Fonts are automatically fetched and optimized by Next.js with zero config.

D Next.js does not support font optimization for self-hosted fonts, only for Google Fonts.

💡 Hint

Consider how Next.js manages font files and optimization differently for these two sources.

Self-hosted fonts need you to provide font files and paths, while Google Fonts are fetched and optimized automatically by Next.js.