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

Question

在我的 Next.js (9.4.4) / Tailwind.css (1.4.6) 项目中，我使用了一种名为 SpaceGrotesk 的自定义字体。为了使它工作，我把我的字体 my public/fonts/spaceGrotesk，然后，我配置我的文件如下：// next.config.jsmodule.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.jsmodule.exports = {    purge: {        mode: "all",        content: [            "./components/**/*.js",            "./Layout/**/*.js",            "./pages/**/*.js"        ],    },    important: true,    theme: {        extend: {            fontFamily: {                paragraph: ["Crimson Text, serif"],                spaceGrotesk: ["SpaceGrotesk, sans-serif"],            },        },    },};我曾经在控制台上显示导入错误时遇到很多麻烦，但都修复了它们。但是，现在我仍然没有得到正确的字体。控制台没有显示警告，检查器似乎说字体加载正确，但仍然使用备用字体（无衬线）而不是 SpaceGrotesk。导入字体我做错了什么？

Answer 1

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

要获取 globals.css 中的字体，您必须将字体放入公用文件夹中。然后将字体集成到 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");

}

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

第 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"],

            },

        },

    },

};

Answer 3

在 Next.JS 10 及以上版本中，不确定以前的版本，不需要替换../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff 为/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff

从公用文件夹提供静态资产时，您无需指定公用文件夹，只需指定链接，就好像公用文件夹是根文件夹一样。静态文件服务

Answer 4

没有“font-woff”格式。

代替

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

和

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