Next.js + Tailwind 中的自定义字体：没有错误，但字体错误

Question

在我的 Next.js (9.4.4) / Tailwind.css (1.4.6) 项目中，我使用了一种名为 SpaceGrotesk 的自定义字体。为了使其正常工作，我将字体设置为 my public/fonts/spaceGrotesk，然后按如下方式配置文件：

// next.config.js
module.exports = {
    cssModules: true,
    webpack: (config, options) => {
        config.node = {
            fs: "empty",
        };
        config.module.rules.push({
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            use: [
                options.defaultLoaders.babel,
                {
                    loader: "url-loader?limit=100000",
                },
                {
                    loader: "file-loader",
                },
            ],
        });
        return config;
    },
};

/** tailwind.css */
@tailwind base;

@tailwind components;

@tailwind utilities;

@font-face {
    font-family: SpaceGrotesk;
    font-weight: 400;
    font-display: auto;
    src: url(../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format("woff");
}

// tailwind.config.js
module.exports = {
    purge: {
        mode: "all",
        content: [
            "./components/**/*.js",
            "./Layout/**/*.js",
            "./pages/**/*.js"
        ],
    },

    important: true,
    theme: {
        extend: {
            fontFamily: {
                paragraph: ["Crimson Text, serif"],
                spaceGrotesk: ["SpaceGrotesk, sans-serif"],
            },
        },
    },
};

我曾经在控制台上显示导入错误时遇到很多麻烦，但全部修复了。然而现在，我仍然没有得到正确的字体。控制台没有显示任何警告，检查员似乎说字体已正确加载，但仍使用备用字体（sans-serif）而不是SpaceGrotesk。

导入字体时我做错了什么？

Answer 1

为了将您自己的字体集成到您的 Next 项目中，您不需要 npm 模块形式的另一个依赖项。

要获取 globals.css 中的字体，您必须将该字体放入 public 文件夹中。然后，将字体集成到 globals.css 中，将其提供给 tailwind.config.js 中的 CSS 框架。之后，您只需将其添加到相应的元素中，或者全局定义它。

全局变量.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "Custom";
  src: url("/CustomFont.woff2");
}

body {
  @apply font-custom; //if u want the font globally applied
}

tailwind.config.js

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false,
  theme: {
    extend: {
      fontFamily: {
        custom: ["Custom", "sans-serif"]
      }
    }
  }
}

Answer 2

感谢这个next-fonts包，我终于解决了这个问题：

步骤1：

安装next-fonts：

npm install --save next-fonts

第2步：

将其导入next.config.js：

// next.config.js

const withFonts = require("next-fonts");

module.exports = withFonts({
    webpack(config, options) {
        config.node = {
            fs: "empty",
        };
        config.module.rules.push({
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            use: [
                options.defaultLoaders.babel,
                {
                    loader: "url-loader?limit=100000",
                },
                {
                    loader: "file-loader",
                },
            ],
        });
        return config;
    },
});

步骤3：

将文件放在public文件夹中的任意位置。例如，我将 SpaceGrotesk 字体放入public/fonts/spaceGrotesk.

步骤4：

使用 @font-face 将它们导入到 CSS 中：

// tailwind.css

@font-face {
    font-family: "SpaceGrotesk";
    font-weight: 400;
    src: url(/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format("woff");
}

/public请注意，URL前面没有。这就是我遇到问题的原因。

第5步：

就像使用其他字体一样使用您的字体：

// tailwind.css

a {
    font-family: "SpaceGrotesk";
}

第 6 步（可选）：

您可以将字体添加到您的配置中，以便您可以使用该类font-space-grotesk：

// tailwind.config.js

module.exports = {
    // ...The rest of your config here...
    theme: {
        extend: {
            fontFamily: {
                "space-grotesk": ["SpaceGrotesk, sans-serif"],
            },
        },
    },
};