Font Optimization

Back

Loading concept...

🎨 Next.js Font Optimization: Making Your Fonts Lightning Fast!

The Story of Slow Fonts 📖

Imagine you’re waiting at a restaurant. You sit down, and the menu takes forever to appear. While you wait, you see an ugly, boring menu placeholder. Then suddenly—pop!—the beautiful menu appears, and everything jumps around on the table!

That’s exactly what happens with fonts on websites. Without optimization:

  1. The page loads with ugly default fonts
  2. Users wait while custom fonts download
  3. Text shifts around when fonts finally load (this is called CLS - Cumulative Layout Shift)

Next.js Font Optimization is like having the menu ready the instant you sit down. No waiting. No jumping. Just beautiful fonts from the start!

🧰 The next/font Module: Your Font Toolbox

Think of next/font as a magical toolbox that handles all your font needs. It has two special compartments:

graph TD
    A["next/font Module"] --> B["next/font/google"]
    A --> C["next/font/local"]
    B --> D["Google Fonts<br>Free & Popular"]
    C --> E["Your Own Fonts<br>Custom Files"]

What Makes It Special?

Feature What It Does
Zero Layout Shift Fonts appear instantly, no jumping
Self-Hosted Downloads fonts at build time
Automatic Optimization Perfect font loading, no extra work
Privacy Friendly No requests to Google at runtime

🌐 next/font/google: Using Google Fonts

Google Fonts are like a free buffet of beautiful fonts. Next.js makes using them super easy!

Basic Example

// app/layout.js
import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
})

export default function RootLayout({
  children
}) {
  return (
    <html className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

What’s Happening Here?

  1. Import the font - Pick any Google Font by name
  2. Configure it - Tell it which characters you need (latin)
  3. Apply it - Use .className to add the font

Using Multiple Fonts

import { Roboto, Open_Sans } from 'next/font/google'

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

const openSans = Open_Sans({
  weight: ['400', '700'],
  subsets: ['latin'],
})

Important Options

Option Example What It Does
weight '400' or ['400', '700'] Font thickness
subsets ['latin'] Character sets to include
style 'italic' or ['normal', 'italic'] Regular or italic
display 'swap' How font loads

📁 next/font/local: Your Custom Fonts

Sometimes you have special fonts that aren’t on Google. Maybe:

  • A brand font your company bought
  • A unique font from a designer
  • Fonts you want full control over

Basic Local Font Setup

// app/layout.js
import localFont from 'next/font/local'

const myFont = localFont({
  src: './fonts/MyFont.woff2',
})

export default function RootLayout({
  children
}) {
  return (
    <html className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

Multiple Weights & Styles

const myFont = localFont({
  src: [
    {
      path: './fonts/MyFont-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './fonts/MyFont-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './fonts/MyFont-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
  ],
})

Recommended Font Formats

graph TD
    A["Font Formats"] --> B["woff2 ⭐ Best"]
    A --> C["woff Good"]
    A --> D["ttf Okay"]
    B --> E["Smallest Size&lt;br&gt;Best Compression"]

Pro Tip: Always use .woff2 files. They’re the smallest and fastest!

🔤 Font Variable Application: Applying Your Fonts

Once you have your font set up, you need to actually USE it. There are two main ways:

Method 1: Using className

const inter = Inter({ subsets: ['latin'] })

// Apply to entire page
<html className={inter.className}>

// Apply to specific element
<h1 className={inter.className}>
  Hello World
</h1>

Method 2: Using CSS Variables

This is the powerful way! It lets you use fonts anywhere in your CSS.

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

const roboto = Roboto({
  weight: ['400', '700'],
  subsets: ['latin'],
  variable: '--font-roboto',
})

export default function RootLayout({
  children
}) {
  return (
    <html
      className={`${inter.variable} ${roboto.variable}`}
    >
      <body>{children}</body>
    </html>
  )
}

Now use them in CSS:

/* globals.css */
h1 {
  font-family: var(--font-roboto);
}

body {
  font-family: var(--font-inter);
}

With Tailwind CSS

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        heading: ['var(--font-roboto)'],
      },
    },
  },
}

// Now use in your components
<h1 className="font-heading">Title</h1>
<p className="font-sans">Body text</p>

⚡ Font Preloading Behavior: The Magic Behind Speed

This is where the magic happens! Next.js automatically does smart things:

What Next.js Does Automatically

graph TD
    A["Build Time"] --> B["Downloads Font Files"]
    B --> C["Bundles with Your App"]
    C --> D["Serves from Your Domain"]
    D --> E["Zero External Requests!"]

The Preload Magic

When you use next/font:

  1. At Build Time: Next.js downloads fonts from Google (or bundles your local fonts)
  2. Self-Hosted: Fonts are served from YOUR website, not Google’s servers
  3. Preload Tags: Adds <link rel="preload"> for critical fonts
  4. CSS Fallback: Provides fallback fonts that match your custom font’s size

What This Means for Users

Without next/font With next/font
Font downloads from Google Font bundled in app
Layout shift when font loads Zero layout shift
Privacy concerns No external requests
Extra network request Already in your bundle

Controlling Preload Behavior

// This font will be preloaded (default)
const inter = Inter({
  subsets: ['latin'],
  preload: true,  // default
})

// This font won't be preloaded
// Good for fonts used rarely
const decorative = Pacifico({
  weight: '400',
  subsets: ['latin'],
  preload: false,
})

The Display Option

Controls what users see while the font loads:

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',  // Most common
})
Value Behavior
swap Show fallback, then swap
block Brief invisible text
fallback Short swap period
optional Use fallback if slow
auto Browser decides

🎯 Quick Summary

graph TD
    A["Want Fonts?"] --> B{Which Type?}
    B -->|Free Popular| C["next/font/google"]
    B -->|Custom File| D["next/font/local"]
    C --> E["Import by Name"]
    D --> F["Point to File"]
    E --> G["Apply with className&lt;br&gt;or CSS variable"]
    F --> G
    G --> H["Automatic Preloading&lt;br&gt;Zero Layout Shift!"]

The 3-Step Recipe

  1. Import your font (Google or local)
  2. Configure it (subsets, weights, variable name)
  3. Apply it (className or CSS variable)

Next.js handles all the optimization automatically!

🚀 You Did It!

You now understand:

  • ✅ The next/font module and why it exists
  • ✅ How to use Google Fonts with next/font/google
  • ✅ How to use custom fonts with next/font/local
  • ✅ How to apply fonts using className and CSS variables
  • ✅ How preloading makes your fonts lightning fast

Your websites will now have beautiful fonts that load instantly! No more ugly font flashes. No more layout jumps. Just smooth, professional typography from the first moment.

Loading story...

Story - Premium Content

Please sign in to view this story and start learning.

Upgrade to Premium to unlock full access to all stories.

Sign In to Access Get Premium Access Close

Stay Tuned!

Story is coming soon.

Story Preview

Story - Premium Content

Please sign in to view this concept and start learning.

Upgrade to Premium to unlock full access to all content.

Sign In to Access Get Premium Access Close