跳到内容
文档错误No Page Custom Font

No Page Custom Font

阻止页面专属自定义字体。

为何出现此错误

  • 您添加的自定义字体仅添加到页面 - 这只会将字体添加到特定页面，而不会添加到整个应用程序。
  • 您添加的自定义字体被添加到了 pages/_document.js 中的一个单独组件中 - 这会禁用自动字体优化。

可能的修复方法

创建文件 ./pages/_document.js 并将字体添加到自定义 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

或作为函数组件

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>
  )
}

何时不使用它

如果您有理由仅为特定页面加载字体，或者不关心字体优化，则可以禁用此规则。