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.

Practice

1. What is the main benefit of self-hosting fonts in a Next.js application?

easy

A. Allows fonts to be loaded only on mobile devices

B. Automatically converts fonts to SVG format

C. Improves website speed and user privacy by serving fonts locally

D. Enables fonts to be downloaded from Google Fonts CDN

Solution

1. Step 1: Understand what self-hosting means

   Self-hosting fonts means serving font files from your own server instead of external sources.

2. Step 2: Identify benefits of self-hosting in Next.js

   This improves loading speed because fonts are fetched faster and enhances privacy by not contacting third-party servers.

3. Final Answer:

   Improves website speed and user privacy by serving fonts locally -> Option C

4. Quick Check:

   Self-hosting = faster load + privacy [OK]

Hint: Self-hosting means local font files, boosting speed and privacy [OK]

Common Mistakes:

• Thinking self-hosting converts font formats automatically
• Believing fonts load only on mobile devices
• Confusing self-hosting with using external CDNs

2. Which is the correct way to import a local font using Next.js 14+ syntax?

easy

A. import localFont from 'next/font/google';

B. import { localFont } from 'next/font/google';

C. import { localFont } from 'next/font/local';

D. import localFont from 'next/font/local';

Solution

1. Step 1: Recall Next.js font import syntax

   Local fonts are imported from 'next/font/local' as a default import.

2. Step 2: Check option correctness

   import localFont from 'next/font/local'; uses default import from 'next/font/local', which is correct. Options A, B, and D incorrectly use 'google' path or named imports.

3. Final Answer:

   import localFont from 'next/font/local'; -> Option D

4. Quick Check:

   Local fonts use default import from 'next/font/local' [OK]

Hint: Local fonts import default from 'next/font/local' [OK]

Common Mistakes:

• Using named imports instead of default import
• Importing local fonts from 'next/font/google'
• Confusing Google fonts import with local fonts

3. Given this code snippet in Next.js, what will be the font-family applied to the <main> element?

import localFont from 'next/font/local';

const myFont = localFont({
  src: './fonts/MyFont.woff2',
  variable: '--my-font',
});

export default function Home() {
  return (
    <main className={myFont.variable} style={{ fontFamily: 'var(--my-font)' }}>
      Hello World
    </main>
  );
}

medium

A. The font-family will be 'MyFont' loaded from the local file

B. The font-family will be the browser default because variable is unused

C. The font-family will be 'var(--my-font)' as a literal string

D. The code will throw a runtime error due to invalid style

Solution

1. Step 1: Understand localFont usage with CSS variable

   The localFont function creates a CSS variable '--my-font' that holds the font-family name for the loaded font.

2. Step 2: Analyze how fontFamily is applied

   The style uses fontFamily: 'var(--my-font)', which correctly applies the font loaded and assigned to the CSS variable.

3. Final Answer:

   The font-family will be 'MyFont' loaded from the local file -> Option A

4. Quick Check:

   CSS variable font applied = local font used [OK]

Hint: CSS variable holds font name, style uses var() to apply it [OK]

Common Mistakes:

• Thinking 'var(--my-font)' is a literal font name
• Assuming variable className is unused
• Believing code throws error due to style object

4. Identify the error in this Next.js font self-hosting code snippet:

import localFont from 'next/font/local';

const myFont = localFont({
  src: './fonts/MyFont.ttf',
  variable: '--font',
});

export default function Page() {
  return <div className={myFont.className} style={{ fontFamily: '--font' }}>Text</div>;
}

medium

A. The fontFamily style should use 'var(--font)' instead of '--font'

B. The src path must be an absolute URL, not relative

C. localFont does not support .ttf files, only .woff2

D. className should be applied to <main>, not <div>

Solution

1. Step 1: Check fontFamily style syntax

   CSS variables must be used with var(), so fontFamily should be 'var(--font)', not '--font'.

2. Step 2: Verify other parts

   The src path can be relative, .ttf is supported, and className can be on any element.

3. Final Answer:

   The fontFamily style should use 'var(--font)' instead of '--font' -> Option A

4. Quick Check:

   CSS variable usage requires var() [OK]

Hint: Use var(--variable) syntax for CSS variables in style [OK]

Common Mistakes:

• Omitting var() around CSS variable in style
• Thinking relative paths are invalid
• Assuming .ttf fonts are unsupported

5. You want to optimize font loading in a Next.js 14 app by self-hosting multiple font weights of 'OpenSans'. Which approach correctly applies different weights using next/font/local and CSS variables?

hard

A. Load all font files manually in _app.js without using next/font/local

B. Configure a single localFont with src as an array specifying path and weight for each file, assign a single CSS variable

C. Use next/font/google for all weights and ignore local hosting

D. Import only one font weight and use CSS font-weight property to simulate others

Solution

1. Step 1: Understand multiple font weights with localFont

   Multiple weights are handled in one localFont call using src: [{ path: './OpenSans-Regular.woff2', weight: '400' }, { path: './OpenSans-Bold.woff2', weight: '700' }], with a single CSS variable like '--font-opensans'.

2. Step 2: Combine variables in CSS or className for usage

   Apply the font className or variable to an ancestor element, then use font-family: var(--font-opensans) with font-weight in styles.

3. Step 3: Evaluate other options

   Import only one font weight and use CSS font-weight property to simulate others is incorrect because CSS font-weight cannot simulate different font files. Use next/font/google for all weights and ignore local hosting ignores self-hosting. Load all font files manually in _app.js without using next/font/local is manual and not optimized.

4. Final Answer:

   Configure a single localFont with src as an array specifying path and weight for each file, assign a single CSS variable -> Option B

5. Quick Check:

   src array + single variable = correct multi-weight self-hosting [OK]

Hint: Single localFont src array for weights + shared CSS variable [OK]

Common Mistakes:

• Trying to fake font weights with CSS alone
• Using Google fonts instead of self-hosting
• Manually loading fonts without next/font/local benefits