Next.js 52: next/font — Self-Hosted Web Fonts
easy⏱ 5 mincoursenextjs
No runtime network request
import { Inter } from 'next/font/google' looks like it fetches from Google at runtime, but it does not — the Next.js build downloads the font files once and bundles them as static assets on your own server. The browser never talks to fonts.googleapis.com, which removes a request, a DNS lookup, and a privacy concern in one move.
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"], display: "swap" });
export default function RootLayout({ children }) {
return (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
);
}
Complete the local strategy
A third STRATEGIES entry for next/font/local is already wired up, with extraRequestMs: 0 (the file already ships in the bundle) and swap: false, just like next/font/google. Simulate a page load on all three rows and compare — then try changing local's extraRequestMs to see the row behave like the link tag instead.
Automatic fallback sizing
Beyond skipping the request, next/font measures the metrics (ascent, descent, line gap) of your chosen font and generates a matching fallback with adjusted sizing — so text laid out with the fallback occupies the exact same box as the final font. That is what removes the font-swap layout jump, not font-display: swap alone.