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

Posted 2023-03-07

【中文标题】Next.js + Tailwind 中的自定义字体：没有错误，但字体错误

【英文标题】：Custom font in Next.js + Tailwind: no error, but wrong font

【发布时间】：2020-10-11 14:39:18

【问题描述】：

在我的 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"],
            ,
        ,
    ,
;

我曾经在控制台上显示导入错误时遇到很多麻烦，但都解决了。但是，现在我仍然没有得到正确的字体。控制台没有显示警告，检查器似乎说字体加载正确，但仍然使用备用字体（无衬线）而不是 SpaceGrotesk。

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

【参考方案1】：

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

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

【参考方案2】：

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

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

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

【参考方案3】：

感谢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;
    ,
);

第三步：

将您的文件放在public 文件夹中的任何位置。 例如，我把我的 SpaceGrotesk 字体放在public/fonts/spaceGrotesk。

第四步：

使用@font-face 将它们导入你的CSS：

// tailwind.css

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

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

第五步：

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

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

【参考方案4】：

没有“font-woff”格式。

替换

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

与

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

【讨论】：

我曾经有过，但我收到了 2 个警告：Failed to decode downloaded font、OTS parsing error: invalid version tag。我在这里找到了“font-woff”解决方案，它删除了我的警告：***.com/questions/30442319/…

答案是您的链接是错误的，您甚至可以在评论中阅读此内容。就像我说的，没有“font-woff”格式。你可以用同样的效果写“whatever-woff-whatever”。您现在遇到的错误与此问题无关，因此您应该新建一个描述此错误的问题。根据此问题中提供的代码，我的答案仍然正确。

谢谢，那我去编辑一下。真正的问题来自于我导入字体的方式，不过……“font-woff”只是一个临时修复，我一直在删除警告。