【问题标题】：Self-hosted fonts in Next.js with next-lessNext.js 中带有 next-less 的自托管字体
【发布时间】：2020-10-10 22:32:15
【问题描述】：

我想要什么，我想知道什么

我想在 Next.js-应用程序中自托管字体（即 Noto），该应用程序已经使用了 @zeit/next-less 插件。

我需要使用 npm-package next-fonts 来自托管字体吗？如果是这样，我是否需要使用 npm-package next-compose-plugins 来使 next-fonts 和 next-less 一起工作？

我是否需要将字体（如 WOFF(2)）下载到我的应用程序存储库中的 /public 目录中？还是直接使用像 fontsource-noto-sans 这样的 npm 包来提供这些字体？

我尝试了什么

我尝试使用 next-compose-plugins 一起使用 next-fonts 和 next-less。我创建了这个/next.config.js：

const WithPlugins = require('next-compose-plugins');
const WithFonts = require('next-fonts');
const WithLess = require('@zeit/next-less');

module.exports = WithPlugins(
    [
        [ WithFonts, {} ],
        [ WithLess, {} ]
    ],
    {});

在我的单个全局 less-file 中，我放了这个：

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Serif'), local('NotoSerif'), url('/public/fonts/noto-serif.woff2') format('woff2');
}

body {
  font-family:
    'Noto Serif',
    // and for debugging:
    monospace;
}

我下载了 Noto 的字体文件并将它们放在 Next.js-application 文件夹中的 …/public/fonts 文件夹中。

Noto 字体未加载，一直使用等宽字体。任何想法为什么？以及如何使用 Next.js + next-less 轻松自托管字体的任何想法？

【问题讨论】：

标签： javascript reactjs less next.js font-face

【解决方案1】：

为什么不直接在文档头部做一个字体的链接rel

我看不到你的项目，但如果你有 public 中的字体，那么你应该能够引用外部加载的文件

<HEAD>
 <link rel="preload" href="/public/fonts/noto-serif.woff2" as="font" type="font/woff2">
</HEAD>

其他地方

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body {
  font-family:
    'Noto Serif',
    // and for debugging:
    monospace;
}

【讨论】：

非常感谢。这确实有效。您能否也告诉我使用 CSS、@font-face 和 url(/font/noto-serif.woff2) 的解决方案不起作用的原因？
这是我的猜测，它的 webpack 包装