1 min read

NEXTJS_USE_NEXT_FONT

Requires using next/font to load local fonts and fonts from supported CDNs.
Table of Contents

Conformance is available on Enterprise plans

This rule is available from version 1.1.0.

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:

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.

Last updated on February 22, 2024