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:
- 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
.
Last updated on July 23, 2024
Was this helpful?