Font optimization and self-hosting in NextJS - Mini Project: Build & Apply

Font Optimization and Self-Hosting in Next.js

📖 Scenario: You are building a Next.js website for a local bakery. You want the website to load fast and look great with a custom font. To do this, you will optimize font loading by self-hosting a Google font instead of loading it from an external server.

🎯 Goal: Build a Next.js app that uses a self-hosted Google font with font optimization enabled. You will add the font files, configure Next.js to load them efficiently, and apply the font to your page.

📋 What You'll Learn

Create a Next.js app with a basic page

Download and add the 'Roboto' font files to the project

Configure Next.js to self-host and optimize the 'Roboto' font

Apply the 'Roboto' font to the main page content

💡 Why This Matters

🌍 Real World

Many websites want to load fonts quickly and reliably without depending on external servers. Self-hosting fonts with Next.js font optimization improves load speed and user experience.

💼 Career

Web developers often optimize font loading to improve site performance and accessibility. Knowing how to self-host and configure fonts in Next.js is a valuable skill for frontend roles.

1

Set up the Next.js page

Create a file called app/page.tsx with a default export of a React functional component that returns a <main> element containing the text Welcome to the Bakery.

NextJS

// Create a Next.js page component in app/page.tsx
// Your code here

Hint

This is the basic page component in Next.js 14 App Router. Use a function named Page that returns JSX.

2

Add Roboto font files to the project

Create a folder called public/fonts/roboto and add the font files Roboto-Regular.woff2 and Roboto-Bold.woff2 inside it. Then, create a file app/fonts.ts and export a constant called roboto using Next.js localFont function to load these two font weights from /fonts/roboto/Roboto-Regular.woff2 and /fonts/roboto/Roboto-Bold.woff2.

NextJS

export default function Page() {
  return Welcome to the Bakery;
}

// Add font setup in app/fonts.ts
// Your code here

Hint

Use localFont from next/font/local to load font files from the public folder. Specify weights 400 and 700.

3

Apply the Roboto font to the page

Import the roboto font from ./fonts in app/page.tsx. Then, add the font's className to the <main> element so the text uses the Roboto font.

NextJS

import { roboto } from './fonts';

export default function Page() {
  return Welcome to the Bakery;
}

// Add the roboto font className to the main element
// Your code here

Hint

Use the className property from the font object to apply the font style.

4

Enable font optimization in next.config.js

Create or update next.config.js at the project root to export a config object with experimental.fontLoaders set to use the local font loader. This enables Next.js font optimization for self-hosted fonts.

NextJS

import { roboto } from './fonts';

export default function Page() {
  return Welcome to the Bakery;
}

// Create next.config.js with fontLoaders config
// Your code here

Hint

This config tells Next.js to optimize local fonts. Add it to next.config.js at the root.

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