| description |
|---|
Next.js supports built-in web font optimization to inline font CSS. Learn more here. |
Next.js helps you optimize loading web fonts by inlining font CSS during next build. This optimization eliminates an extra network round trip to fetch font declaration files. This results in improvements to First Contentful Paint (FCP) and Largest Contentful Paint (LCP). For example, this is the transformation Next.js makes:
// Before
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
// After
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<style data-href="https://fonts.googleapis.com/css2?family=Inter&display=optional">
@font-face{font-family:'Inter';font-style:normal...
</style>To add a web font to your Next.js application, add the font to a Custom Document.
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}Adding fonts to _document is preferred over individual pages. When adding fonts to a single page with next/head, font optimizations included by Next.js will not work on navigations between pages client-side or when using streaming.
Next.js currently supports optimizing Google Fonts and Typekit, with support for other font providers coming soon. We're also planning to add control over loading strategies and font-display values. See Google Font Display for more information.
Note: Font Optimization does not currently support self-hosted fonts.
If you do not want Next.js to optimize your fonts, you can opt-out.
// next.config.js
module.exports = {
optimizeFonts: false,
}For more information on what to do next, we recommend the following sections: