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

【问题标题】：NextJS - Google font is not loading or displaying on the websiteNextJS - Google 字体未加载或显示在网站上
【发布时间】：2021-11-22 01:40:48
【问题描述】：

遵循文档并使用提供的代码添加了一个 _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 是否会受到干扰？

【问题讨论】：

您是否已经在tailwind.config.js 中定义了该字体？

标签： reactjs fonts next.js tailwind-css google-fonts

【解决方案1】：

在 globals.css

中

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Kurale&display=swap');

/* From Public Directory */
@font-face {
  font-family: 'Kurale';
  src: url('/fonts/Kurale.ttf');
  font-style: medium;
  font-weight: normal;
  font-display: swap;
}

【讨论】：

啊，是的，谢谢！我忘了在我的 globals.css 表中设置它。

【解决方案2】：

尝试在globals.css（或导入到_app.js 的任何样式表）中使用@import，而不是<link>：

/* globals.css */
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap");

【讨论】：

【解决方案3】：

检查this，使用

【讨论】：