Skip to content
DocsErrorsNo Page Custom Font

No Page Custom Font

Prevent page-only custom fonts.

Why This Error Occurred

  • The custom font you're adding was added to a page - this only adds the font to the specific page and not the entire application.
  • The custom font you're adding was added to a separate component within pages/_document.js - this disables automatic font optimization.

Possible Ways to Fix It

Create the file ./pages/_document.js and 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

Or as a function component:

pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'   export default function Document() {  return (  <Html>  <Head>  <link  href="https://fonts.googleapis.com/css2?family=Inter&display=optional"  rel="stylesheet"  />  </Head>  <body>  <Main />  <NextScript />  </body>  </Html>  ) }

When Not To Use It

If you have a reason to only load a font for a particular page or don't care about font optimization, then you can disable this rule.

Was this helpful?