如何在 next.js 应用程序中加载自定义字体？答案

【问题标题】：How to load custom fonts in a next.js app when it's in production?如何在 next.js 应用程序中加载自定义字体？
【发布时间】：2021-08-31 13:55:15
【问题描述】：

好的，所以这个问题听起来很容易回答，相信我，我已经阅读了下一个 js 文档！我认为我在下一个 js 项目中遇到的可能是错误或我错过的东西。

我有 .ttf 格式的自定义字体，它们位于公共文件夹内名为“fonts”的文件夹中，当我使用 npm run dev 运行我的项目并在 localhost 上检查它时，我的字体已正确导入和应用到页面，但在生产中，我的下一个 js 应用程序似乎无法加载/查找字体！

当我在生产中打开我的项目时，会应用标准字体，并且在控制台选项卡中我可以看到一条错误消息：Failed to load resource: the server responded with a status of 404 ()，并且该消息与未加载/未找到的字体相关联！

所以主要问题是，在开发中一切正常且符合预期，错误/错误不会发生，只有在生产中字体不会被加载或找到。

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

我在之前的项目中所做的是

将字体放在public/static 或某处
在与字体相同的目录中放置一个声明字体的CSS 文件

例如：/public/fonts/fonts_style.css

    @font-face {
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/raleway-v19-latin-regular.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('../fonts/raleway-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/raleway-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/raleway-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
           url('../fonts/raleway-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/raleway-v19-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
    }

然后将其导入 pages/_document.js 文件中的 css 文件。

例子：

render() {
    return (
        <Html>
            <Head>
                <link href="/fonts/fonts_style.css" rel="stylesheet"/>
            </Head>
        </Html>
    )
}

【讨论】：