Next.js 中带有 next-less 的自托管字体

Question

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

我想在 Next.js-application which already makes use of the @zeit/next-less 插件中自行托管字体（即 Noto）。

我需要使用 npm-package next-fonts to self-host fonts? If so, do I need to use the npm-package next-compose-plugins 让 next-fonts 和 next-less 一起工作吗？

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

我试过的

我尝试使用 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 应用程序文件夹的 …/public/fonts 文件夹中。

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

Answer 1

为什么不直接做一个 link 文档头部字体的 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;
}

Next.js 中带有 next-less 的自托管字体

Self-hosted fonts in Next.js with next-less

javascript

less

font-face

reactjs

next.js

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

我试过的