NextJS - Google 字体未在网站上加载或显示

Question

按照文档并使用提供的代码添加了一个 _document.js 文件：

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap" rel="stylesheet" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

当我使用我的 chrome 扩展字体检查器并在检查器中验证时，它声明它使用默认字体。知道我怎样才能让它工作吗？我正在使用 tailwindcss 是否会受到一些干扰？

Answer 1

检查 this，使用

NextJS - Google 字体未在网站上加载或显示

NextJS - Google font is not loading or displaying on the website

reactjs

fonts

next.js

tailwind-css

google-fonts