NEXTJS_USE_NEXT_FONT

next/font automatically optimizes fonts and removes external network requests for improved privacy and performance.

By default, this rule is disabled. Enable it by customizing Conformance.

This means you can optimally load web fonts with zero layout shift, thanks to the underlying CSS size-adjust property used.

For further reading, see:

• https://nextjs.org/docs/basic-features/font-optimization
• https://nextjs.org/docs/pages/api-reference/components/font
• https://www.lydiahallie.io/blog/optimizing-webfonts-in-nextjs-13

This rule will catch the following code.

@font-face {
  font-family: Foo;
  src:
    url(https://fonts.gstatic.com/s/roboto/v30/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2)
      format('woff2'),
    url(/custom-font.ttf) format('truetype');
  font-display: block;
  font-style: normal;
  font-weight: 400;
}

function App() {
  return (
    <link
      href="https://fonts.googleapis.com/css2?family=Krona+One&display=optional"
      rel="stylesheet"
    />
  );
}

Replace any @font-face at-rules and link elements that are caught by this rule with next/font.