Next.js has built in font optimization. It will automatically inline font CSS at build time, which will eliminate the time it takes to fetch font declarations.

It improves the following things:

• Improves First Contentful Paint (FCP)

• Improves Largest Contentful Paint (LCP)

// before
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet"/>
// after
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face {
    font-family: 'Inter';
    font-style: normal...
</style>

How to use Font Optimization

When adding a web font to your Next.js application, you should override next/head.

• You can, for example, add the font to a specific page.

• You can also add it to your entire application with a custom document (advanced)

How to disable font optimization

You can opt out of having Next.js optimize your fonts by adding the following to your next.config.js:

module.exports = { optimizeFonts: false, }