Q8: How does next/font optimize custom typography and prevent layout shift?
next/font automatically downloads font files at build time and hosts them alongside static assets. It injects CSS size-adjust fallbacks to match font metrics, eliminating external network requests to Google Fonts and completely preventing Flash of Unstyled Text (FOUT) and Cumulative Layout Shift (CLS).
Configuring Google Fonts in Layout
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>
);
}💡 Inter font files download at build time and apply via CSS class name selectors.
Key Takeaways
- Zero external network requests at runtime; fonts are self-hosted automatically.
- Eliminates FOUT and CLS using size-adjust CSS fallbacks.
Knowledge Check
Does next/font make browser network calls to Google Fonts servers when users visit the site in production?