Font optimization and self-hosting in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is font optimization in Next.js?

Font optimization in Next.js means loading fonts in a way that makes pages load faster and look good quickly. It automatically preloads and subsets fonts to reduce the size and improve performance.

beginner

Why should you self-host fonts instead of using third-party font providers?

Self-hosting fonts means storing font files on your own server. This improves privacy, reduces external requests, and gives you full control over font loading and caching.

intermediate

How do you add a Google font with optimization in Next.js?

You can import fonts from 'next/font/google' and use them as React components. Next.js will automatically optimize and preload these fonts for you.

intermediate

What is the benefit of font subsetting?

Font subsetting means including only the characters you need from a font. This reduces file size and speeds up page loading.

intermediate

How can you self-host custom fonts in a Next.js project?

Place font files in the public folder, then use CSS @font-face rules to load them. This lets you control font loading without relying on external services.

What does Next.js do automatically when you import fonts from 'next/font/google'?

A Uploads fonts to a third-party server

B Preloads and subsets fonts for better performance

C Converts fonts to images

D Disables font loading

Next.js preloads and subsets fonts imported from 'next/font/google' to improve loading speed and reduce font size.

Why is self-hosting fonts better for privacy?

A Because it avoids sending user data to external font servers

B Because it encrypts fonts automatically

C Because it hides fonts from the browser

D Because it disables fonts

Self-hosting fonts avoids requests to external servers, which can track user data, thus improving privacy.

Where should you place font files to self-host them in a Next.js project?

A In the node_modules folder

B In the styles folder only

C In the pages folder

D In the public folder

The public folder is used to serve static assets like fonts directly in Next.js.

What is font subsetting?

A Including only needed characters in a font file

B Changing font colors

C Converting fonts to SVG

D Using multiple fonts at once

Font subsetting reduces font file size by including only the characters you need.

Which of these is NOT a benefit of font optimization?

A Faster page load times

B Reduced font file size

C Automatic font color changes

D Better user experience

Font optimization improves loading and size but does not change font colors automatically.

Explain how Next.js helps with font optimization when using Google Fonts.

Think about how Next.js handles font files behind the scenes.

Describe the steps to self-host a custom font in a Next.js project.

Consider where static files go and how CSS loads fonts.