Font optimization with next/font in NextJS

Introduction

Using next/font helps your website load fonts faster and look better on all devices. It automatically optimizes fonts for speed and quality.

You want your website to load quickly with custom fonts.

You want to avoid slow font loading that causes text to jump or flash.

You want to use Google Fonts or local fonts easily in your Next.js app.

You want to improve your website's performance scores.

You want consistent font rendering across browsers and devices.

Syntax

NextJS

import { fontName } from 'next/font/google';

const myFont = fontName({
  subsets: ['latin'],
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  variable: '--my-font-variable',
});

Replace fontName with the actual font you want, like Roboto or Inter.

You can specify subsets, weights, and styles to load only what you need.

Examples

This loads the Roboto font with normal weight 400 for Latin characters.

NextJS

import { Roboto } from 'next/font/google';

const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400'],
});

This loads Inter font with normal and bold weights, including italic styles.

NextJS

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  weight: ['400', '700'],
  style: ['normal', 'italic'],
});

This loads a local font file and assigns a CSS variable for easy use.

NextJS

import localFont from 'next/font/local';

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

Sample Program

This Next.js component loads the Inter font with normal and bold weights. It applies the font style to the main content using the className provided by next/font. The font is optimized and loaded efficiently.

NextJS

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  weight: ['400', '700'],
});

export default function Home() {
  return (
    <main className={inter.className} style={{ padding: '2rem' }}>
      <h1>Hello, Next.js with optimized fonts!</h1>
      <p>This text uses the Inter font loaded and optimized by next/font.</p>
    </main>
  );
}

Important Notes

Using next/font automatically preloads fonts for faster loading.

Only include the font weights and styles you need to keep your site fast.

Fonts loaded with next/font avoid layout shifts caused by late font loading.

Summary

next/font helps load fonts faster and better in Next.js apps.

You can load Google Fonts or local fonts with simple code.

Optimizing fonts improves user experience and website speed.

Practice

1. What is the main purpose of using next/font in a Next.js application?

easy

A. To convert fonts into images for display

B. To create custom font files from scratch

C. To optimize font loading for better performance and user experience

D. To disable all fonts and use system defaults only

Solution

1. Step 1: Understand the role of next/font

   next/font is designed to load fonts efficiently in Next.js apps, improving speed and user experience.

2. Step 2: Compare options with this purpose

   Only To optimize font loading for better performance and user experience describes optimization of font loading, which matches the purpose of next/font.

3. Final Answer:

   To optimize font loading for better performance and user experience -> Option C

4. Quick Check:

   Font optimization = To optimize font loading for better performance and user experience [OK]

Hint: Remember: next/font improves font loading speed [OK]

Common Mistakes:

• Thinking next/font creates fonts
• Confusing font optimization with image conversion
• Assuming next/font disables fonts

2. Which of the following is the correct way to import the Inter font from Google Fonts using next/font/google?

easy

A. import Inter from 'next/font/google'; const inter = new Inter();

B. import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] });

C. const inter = require('next/font/google').Inter();

D. import { Inter } from 'next/font/local'; const inter = Inter();

Solution

1. Step 1: Check the import syntax for Google Fonts

   The correct import uses named import from 'next/font/google' and calls the font function with options.

2. Step 2: Validate the usage

   import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] }); matches the correct pattern: import with braces, call with options object.

3. Final Answer:

   import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] }); -> Option B

4. Quick Check:

   Correct import and call = import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] }); [OK]

Hint: Use named import and call font as a function with options [OK]

Common Mistakes:

• Using default import instead of named import
• Using require instead of import
• Importing from 'next/font/local' for Google Fonts

3. Given this code snippet in a Next.js component:

import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });

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

What will be the effect of using inter.className in the <main> element?

medium

A. It adds a random CSS class unrelated to fonts

B. It causes a runtime error because className is undefined

C. It applies default system fonts ignoring Inter

D. It applies the Inter font styles optimized and loaded by next/font

Solution

1. Step 1: Understand what inter.className provides

   The Inter font function returns an object with a className property that applies the optimized font styles.

2. Step 2: Check usage in the component

   Using className={inter.className} applies the Inter font styles to the <main> element.

3. Final Answer:

   It applies the Inter font styles optimized and loaded by next/font -> Option D

4. Quick Check:

   inter.className applies optimized font styles = It applies the Inter font styles optimized and loaded by next/font [OK]

Hint: className from next/font applies the font styles [OK]

Common Mistakes:

• Assuming className is undefined
• Thinking it applies system fonts instead
• Confusing className with inline styles

4. Identify the error in this code snippet that tries to load a local font with next/font/local:

import localFont from 'next/font/local';

const myFont = localFont({
  src: './fonts/MyFont.ttf',
  weight: '400',
  style: 'normal'
});

export default function Page() {
  return <div className={myFont.className}>Sample Text</div>;
}

medium

A. The src path must be an array, not a string

B. The weight property should be a number, not a string

C. The import should use braces: { localFont }

D. The style property is not supported in local fonts

Solution

1. Step 1: Check the src property format for localFont

   Local fonts require src to be an array of objects with path and weight, not a single string.

2. Step 2: Validate other properties

   Weight can be string or number, import default is correct, style is supported.

3. Final Answer:

   The src path must be an array, not a string -> Option A

4. Quick Check:

   Local font src requires array = The src path must be an array, not a string [OK]

Hint: Local font src must be an array of objects [OK]

Common Mistakes:

• Using string instead of array for src
• Misusing import syntax with braces
• Assuming style is unsupported

5. You want to load two Google Fonts, Roboto and Open Sans, both with latin subsets, and apply them to different parts of your Next.js page. Which approach correctly uses next/font/google to optimize both fonts and apply them separately?

hard

A. import { Roboto, Open_Sans } from 'next/font/google';
const roboto = Roboto({ subsets: ['latin'] });
const openSans = Open_Sans({ subsets: ['latin'] });

export default function Page() {
return <>
<header className={roboto.className}>Header Text</header>
<main className={openSans.className}>Main Text</main>
</>;
}

B. }
;;tg&/;tl&
;tg&niam/;tl&txeT niaM;tg&}emaNssalc.snaSnepo{=emaNssalc niam;tl&
;tg&redaeh/;tl&txeT redaeH;tg&}emaNssalc.otobor{=emaNssalc redaeh;tl&
;tg&;tl& nruter
{ )(egaP noitcnuf tluafed tropxe

;)} ]'nital'[ :stesbus {(snaS_nepO = snaSnepo tsnoc
;)} ]'nital'[ :stesbus {(otoboR = otobor tsnoc
;'elgoog/tnof/txen' morf } snaS_nepO ,otoboR { tropmi

C. import Roboto from 'next/font/google';
import OpenSans from 'next/font/google';
const roboto = Roboto({ subsets: ['latin'] });
const openSans = OpenSans({ subsets: ['latin'] });

export default function Page() {
return <>
<header className={roboto.className}>Header Text</header>
<main className={openSans.className}>Main Text</main>
</>;
}

D. import { Roboto, OpenSans } from 'next/font/google';
const roboto = Roboto({ subsets: ['latin'] });
const openSans = OpenSans({ subsets: ['latin'] });

export default function Page() {
return <div className={`${roboto.className} ${openSans.className}`}>Combined Text</div>;
}

Solution

1. Step 1: Check correct font names and import syntax

   Font names must match exact exported names from next/font/google. 'OpenSans' is correct, 'Open_Sans' is not.

2. Step 2: Verify usage of separate classNames

   Applying separate classNames to different elements is correct for different fonts.

3. Step 3: Review other options

   import { Roboto, Open_Sans } from 'next/font/google'; const roboto = Roboto({ subsets: ['latin'] }); const openSans = Open_Sans({ subsets: ['latin'] }); export default function Page() { return <> <header className={roboto.className}>Header Text</header> <main className={openSans.className}>Main Text</main> </>; } uses wrong font name 'Open_Sans'. import Roboto from 'next/font/google'; import OpenSans from 'next/font/google'; const roboto = Roboto({ subsets: ['latin'] }); const openSans = OpenSans({ subsets: ['latin'] }); export default function Page() { return <> <header className={roboto.className}>Header Text</header> <main className={openSans.className}>Main Text</main> </>; } uses default imports incorrectly. import { Roboto, OpenSans } from 'next/font/google'; const roboto = Roboto({ subsets: ['latin'] }); const openSans = OpenSans({ subsets: ['latin'] }); export default function Page() { return <div className={`${roboto.className} ${openSans.className}`}>Combined Text</div>; } combines both fonts on one element, not separately.

4. Final Answer:

   Use named imports with correct font names and apply classNames separately -> Option A

5. Quick Check:

   Correct font names and separate usage = import { Roboto, OpenSans } from 'next/font/google'; const roboto = Roboto({ subsets: ['latin'] }); const openSans = OpenSans({ subsets: ['latin'] }); export default function Page() { return <> <header className={roboto.className}>Header Text</header> <main className={openSans.className}>Main Text</main> </>; } [OK]

Hint: Use exact font names and apply className separately [OK]

Common Mistakes:

• Using incorrect font names with underscores
• Using default imports instead of named imports
• Combining multiple fonts on one element incorrectly