Font optimization and self-hosting in NextJS - Step-by-Step Execution

Concept Flow - Font optimization and self-hosting

Start Next.js Project

↓

Add font files locally

↓

Configure next.config.js for fonts

↓

Import fonts in CSS or JS

↓

Next.js builds with optimized fonts

↓

Browser loads fonts from local server

↓

Faster load, better control, no external requests

This flow shows how Next.js projects add local font files, configure them for optimization, and serve them from the local server for faster loading.

Execution Sample

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!</main>;
}

This code imports a local font file, sets it up with font-display swap, and applies it to a component's main element.

Execution Table

Step	Action	Result	Effect
1	Import localFont from next/font/local	localFont function ready	Prepare to load local font
2	Call localFont with src './fonts/MyFont.woff2' and display 'swap'	myFont object created with className	Font CSS class generated
3	Use myFont.className in <main> element	main element gets font CSS class	Text will use the local font
4	Next.js build processes font	Font optimized and included in build	Font served from local server
5	Browser loads page	Font CSS class applied	Text rendered with local font quickly
6	Font-display swap triggers	Fallback font shows until local font loads	Smooth font loading without invisible text
7	Page fully loaded with local font	Text uses MyFont.woff2	Improved performance and control

💡 Font is fully loaded and applied, no external font requests needed

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
myFont	undefined	{className: 'font_xyz'}	{className: 'font_xyz'}	{className: 'font_xyz'}

Key Moments - 3 Insights

Why do we use 'display: swap' in the font config?

Using 'display: swap' ensures the browser shows fallback text immediately and swaps to the local font once loaded, avoiding invisible text. See execution_table step 6.

How does Next.js serve the font locally instead of from Google Fonts?

By importing the font file locally and configuring next/font/local, Next.js bundles the font in the build and serves it from your server, as shown in execution_table step 4.

What does myFont.className represent and how is it used?

myFont.className is a CSS class generated by Next.js that applies the font styles. It is added to the element's className to use the font, as in execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of myFont after step 2?

A A string with font file path

B Undefined

C An object with a className property

D A React component

💡 Hint

Check variable_tracker row for myFont after Step 2

At which step does the browser start using the local font for text rendering?

A Step 4

B Step 7

C Step 5

D Step 3

💡 Hint

Look at execution_table step 7 describing final font usage

If we remove 'display: swap' from the font config, what changes in the execution?

A Text might be invisible until font loads

B Font will load faster

C No change in font loading behavior

D Font will load from Google Fonts instead

💡 Hint

Refer to key_moments about 'display: swap' and execution_table step 6

Concept Snapshot

Next.js font optimization with self-hosting:
- Import fonts locally using next/font/local
- Configure with src and display options
- Use generated className on elements
- Next.js bundles and serves fonts locally
- 'display: swap' avoids invisible text
- Results in faster, controlled font loading

Full Transcript

This visual execution shows how Next.js handles font optimization and self-hosting. First, you import the localFont function from next/font/local. Then you call it with your local font file path and set display to 'swap' to improve loading behavior. This creates a font object with a CSS class name. You apply this class name to your component's element. During build, Next.js optimizes and bundles the font to serve it from your server. When the browser loads the page, it applies the font class, showing fallback text immediately and swapping to the local font once loaded. This avoids invisible text and improves performance by removing external font requests. Variables like myFont hold the font class name throughout. Key moments include understanding why 'display: swap' is important and how Next.js serves fonts locally instead of from external sources. The quiz tests your understanding of these steps and variable states.

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