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

            },

        },

    },

};

我曾经在控制台上显示导入错误时遇到很多麻烦，但都修复了它们。但是，现在我仍然没有得到正确的字体。控制台没有显示警告，检查器似乎说字体加载正确，但仍然使用备用字体（无衬线）而不是 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.jsmodule.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.jsconst 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.cssa {    font-family: "SpaceGrotesk";}第 6 步（可选）：您可以将字体添加到配置中，以便使用该类font-space-grotesk：// tailwind.config.jsmodule.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");