Skip to main content

Next.js Font Optimization

Font loading is a critical aspect of web performance that can significantly impact user experience. Poorly implemented fonts can cause layout shifts, flash of unstyled text (FOUT), or flash of invisible text (FOIT). Next.js provides built-in font optimization to address these issues and improve your application's performance metrics.

Why Font Optimization Matters​

Before diving into Next.js's font optimization features, it's important to understand why font optimization matters:

  1. Core Web Vitals impact: Unoptimized fonts can negatively affect Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP)
  2. User experience: Font loading issues like FOUT and FOIT create jarring visual experiences
  3. Performance overhead: External font requests add network overhead and can block rendering

Next.js Font System​

Next.js 13 introduced a new font system built on the CSS @font-face directive that provides:

  • Automatic font optimization
  • Reduced layout shifts
  • Enhanced privacy (no requests sent to Google from the browser)
  • Zero runtime JavaScript
  • Self-hosting of any font file

Let's explore how to implement font optimization in Next.js.

Basic Font Implementation​

Using the next/font Module​

Next.js provides two main ways to load fonts:

  1. next/font/google - For Google Fonts
  2. next/font/local - For local/custom font files

Let's start with Google Fonts:

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

// Initialize the font object
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

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

In this example, Next.js automatically:

  1. Downloads the Inter font at build time
  2. Self-hosts the font files with other static assets
  3. Removes external network requests to Google
  4. Applies optimal font-display strategies
  5. Preloads font CSS

Using Local Fonts​

For custom fonts or when you need to self-host specific font files:

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

// Load local font files
const myCustomFont = localFont({
  src: [
    {
      path: '../fonts/CustomFont-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: '../fonts/CustomFont-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
  ],
  display: 'swap',
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={myCustomFont.className}>
      <body>{children}</body>
    </html>
  );
}

Advanced Font Configuration​

Variable Fonts Support​

Variable fonts contain multiple variations within a single file, reducing the number of font files needed:

jsx
import { Roboto_Flex } from 'next/font/google';

const roboto = Roboto_Flex({
  subsets: ['latin'],
  // Optional: Specify specific axes if needed
  axes: ['wght', 'slnt'],
});

export default function MyComponent() {
  return (
    <div className={roboto.className}>
      <h1 style={{ fontWeight: 900 }}>Bold Heading</h1>
      <p style={{ fontWeight: 400 }}>Normal paragraph text</p>
    </div>
  );
}

Subsetting Fonts​

To reduce font file size, you can specify which subsets of characters to include:

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

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

Font Loading Strategies​

Control how fonts load with the display property:

jsx
import { Montserrat } from 'next/font/google';

const montserrat = Montserrat({
  subsets: ['latin'],
  display: 'swap', // 'auto' | 'block' | 'swap' | 'fallback' | 'optional'
});

Each value has specific behavior:

  • swap: Shows fallback font until custom font loads (minimizes invisible text)
  • block: Brief invisible text period, then shows custom font
  • fallback: Mix between swap and block
  • optional: Lets browser determine whether to use custom font based on connection
  • auto: Browser default (usually block)

Applying Fonts to Specific Elements​

Instead of applying fonts globally, you can target specific elements:

jsx
// app/page.js
import { Roboto, Open_Sans } from 'next/font/google';

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

const openSans = Open_Sans({
  subsets: ['latin'],
  weight: '400',
  variable: '--font-opensans',
});

export default function Page() {
  return (
    <main className={`${roboto.variable} ${openSans.variable}`}>
      <h1 className="font-roboto">This uses Roboto</h1>
      <p className="font-opensans">This uses Open Sans</p>
    </main>
  );
}

And in your CSS:

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

.font-opensans {
  font-family: var(--font-opensans);
}

Preloading Optimization​

Next.js automatically handles font preloading to improve performance. However, you can control this behavior:

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

const inter = Inter({
  subsets: ['latin'],
  preload: true, // default is true
});

For fonts only used on specific pages, you might want to disable preloading at the root level and handle it on the page where it's needed.

Real-World Example: Multiple Font Usage​

Here's a more complex real-world implementation using multiple fonts for different purposes:

jsx
// app/layout.js
import { Montserrat, Merriweather } from 'next/font/google';
import localFont from 'next/font/local';
import './globals.css';

// Primary font for headings
const montserrat = Montserrat({
  subsets: ['latin'],
  weight: ['700', '900'],
  variable: '--font-montserrat',
  display: 'swap',
});

// Font for body text
const merriweather = Merriweather({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-merriweather',
  display: 'swap',
});

// Custom font for branding elements
const brandFont = localFont({
  src: '../fonts/BrandFont.woff2',
  variable: '--font-brand',
  display: 'block',
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${montserrat.variable} ${merriweather.variable} ${brandFont.variable}`}>
      <body>
        <header className="font-brand">My Website</header>
        <main>{children}</main>
      </body>
    </html>
  );
}

And in your CSS:

css
/* globals.css */
:root {
  --font-montserrat: var(--font-montserrat), system-ui, sans-serif;
  --font-merriweather: var(--font-merriweather), Georgia, serif;
  --font-brand: var(--font-brand), system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-montserrat);
}

p, li, blockquote {
  font-family: var(--font-merriweather);
}

.font-brand {
  font-family: var(--font-brand);
}

Handling Font Loading Performance​

For larger sites with many font variations, you might want to implement more advanced strategies:

Lazy Loading Fonts for Less Critical Pages​

jsx
// app/special-page/page.js
import { Raleway } from 'next/font/google';

// This font only loads when this page is visited
const raleway = Raleway({
  subsets: ['latin'],
  weight: '400',
});

export default function SpecialPage() {
  return (
    <div className={raleway.className}>
      <h1>Special Page with Special Font</h1>
      <p>This page uses Raleway which is only loaded when visiting this route.</p>
    </div>
  );
}

Combining with Tailwind CSS​

Next.js font optimization works well with Tailwind CSS:

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

Then in your layout:

jsx
// app/layout.js
import { Inter, Merriweather, Roboto_Mono } from 'next/font/google';

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

const merriweather = Merriweather({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-merriweather',
});

const robotoMono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${merriweather.variable} ${robotoMono.variable}`}>
      <body>
        <h1 className="font-sans">Sans-serif heading</h1>
        <p className="font-serif">Serif paragraph text</p>
        <code className="font-mono">Monospace code</code>
        {children}
      </body>
    </html>
  );
}

Summary​

Next.js font optimization provides a powerful, developer-friendly way to implement fonts with optimal performance. By leveraging these features, you can:

  1. Eliminate layout shifts by preloading and properly configuring fonts
  2. Improve privacy by removing external requests to Google
  3. Enhance performance through automatic optimization and self-hosting
  4. Simplify implementation with a clear, declarative API
  5. Support variable fonts for more efficient font loading

By following the practices outlined in this guide, you'll create web applications with faster load times, improved user experience, and better Core Web Vitals scores.

Additional Resources​

Exercises​

  1. Implement a Next.js application that uses different fonts for headings, body text, and code snippets.
  2. Compare the network behavior and loading performance between traditional font loading and Next.js font optimization.
  3. Create a page that uses a variable font and test how it affects load performance compared to loading multiple font weights.
  4. Set up a Next.js project that uses both Google and local custom fonts together.
  5. Implement different font display strategies and observe how they affect the user experience on slow connections.

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)