Since version 10.2, Next.js has built-in web font optimization.
By default, Next.js will automatically inline font CSS at build time, eliminating an extra round trip to fetch font declarations. This results in improvements to First Contentful Paint (FCP) and Largest Contentful Paint (LCP). For example:
// Before
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
// After
<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 Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
Note that we don't recommend adding fonts with next/head, as this only applies the font to the particular page and won't work with a streaming architecture.
Automatic Webfont Optimization currently supports 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: