next/font automatically self-hosts fonts and removes external network requests, eliminating FOIT/FOUT and improving privacy and performance.
Common Interview Questions
Q: Google font setup?
Answer: Fonts download at build time and are served from your domain. variable enables Tailwind font-sans integration.
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
export default function RootLayout({ children }) {
return (
<html className={inter.variable}>
<body className={inter.className}>{children}</body>
</html>
);
}
Q: Benefits over link tag to Google?
Answer: No render-blocking external CSS, no layout shift from font swap, GDPR-friendly self-hosting, and subsetting reduces bytes.
Q: Local fonts?
Answer: Use for custom brand fonts with same optimization pipeline.
import localFont from "next/font/local";
const myFont = localFont({ src: "./MyFont.woff2" });
Q: Multiple fonts performance tip?
Answer: Limit font weights/styles loaded. Each variant is a separate file — only import what you use.
Key Points for Interviews
-
Self-hosted at build time — no Google CDN round trip
-
size-adjust reduces CLS during font load
-
Apply in root layout for global consistency
-
CSS variables integrate with design systems
-
Part of Core Web Vitals optimization story