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

Question

在我的 Next.js (9.4.4) / Tailwind.css (1.4.6) 项目中，我使用了一种名为 SpaceGrotesk 的自定义字体。为了让它工作，我把我的字体放在 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

没有格式“font-woff”。

替换

src: url(../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format("font-woff");

和

src: url(../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format("woff");

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

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

第 5 步：

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

// tailwind.css

a {
    font-family: "SpaceGrotesk";
}

第 6 步（可选）：

您可以将字体添加到您的配置中，这样您就可以使用 class font-space-grotesk:

// tailwind.config.js

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

Answer 3

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

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

globals.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 4

在Next.JS版本10及以上，之前的版本不清楚，不需要更换../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff /fonts/spaceGrotesk/SpaceGrotesk-Regular.woff

从 public 文件夹提供静态资源时，您不需要指定 public 文件夹，而只指定 link，就好像 public 文件夹是根文件夹。 Static File Serving

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

Custom font in Next.js + Tailwind: no error, but wrong font

javascript

reactjs

webpack

next.js

tailwind-css