LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 3712 min read

Font Optimization

Self-host Google Fonts and custom fonts automatically, with zero layout shift, using next/font.

The Problem with Traditional Web Fonts

Loading a Google Font the traditional way means adding a <link> tag that fetches from Google's servers at runtime — an extra external request, a delay before text renders in its final font (or a jarring swap once it loads), and a privacy consideration since the request goes to a third party.

Using next/font/google

next/font/google downloads the font at build time and self-hosts it alongside your other static assets — no request to Google at runtime, and no layout shift, since Next.js reserves the correct space using fallback font metrics.

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


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


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

Because the font file is downloaded once at build time and served from your own app, there is no runtime network request to a font provider at all — a genuine privacy and performance improvement over a traditional <link> tag.

Using a Local Font

For a custom or licensed font file, next/font/local applies the exact same self-hosting and layout-shift prevention to your own font files.

import localFont from 'next/font/local';


const brandFont = localFont({ src: './fonts/Brand-Regular.woff2' });


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

FAQs

No — next/font/google replaces that entirely; the font is bundled and self-hosted as part of your build.

Yes — import and configure each one separately, then apply the relevant className wherever you need that specific font.

Summary

next/font removes external font requests and layout shift by self-hosting fonts automatically at build time. Next, you'll see the same idea applied to third-party scripts.

Next Lesson →

Script Optimization