小编Kri*_*jar的帖子

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

按照文档并使用提供的代码添加 _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
Run Code Online (Sandbox Code Playgroud)

当我使用 chrome 扩展字体检查器并在检查器中进行验证时,它指出它使用默认字体。知道如何让它发挥作用吗?我使用 tailwindcss 可能会受到一些干扰吗?

fonts reactjs next.js google-fonts tailwind-css

22
推荐指数
3
解决办法
3万
查看次数

标签 统计

fonts ×1

google-fonts ×1

next.js ×1

reactjs ×1

tailwind-css ×1