在Next.js中使用Material-UI添加自托管字体

Question

当我尝试在Next.js中使用Material UI 5添加自托管字体时，出现了问题。我遇到了这个错误：

您可能需要一个适当的加载器来处理此文件类型，目前没有配置任何加载器来处理此文件。请参见 https://webpack.js.org/concepts#loaders（源代码已省略对于此二进制文件）

即使我在next.config.js中添加了file-loader，如下：

module.exports = {
  module: {
    rules: [
      {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: ['file-loader'],
    },
    ],
  },
};

这是我的定制主题：

PS：我的本地字体名称是BarcadeBrawl.ttf。

import { createTheme } from "@mui/material";
import { purple, blue } from '@mui/material/colors';
import BarcadeBrawl from '../assets/fonts/BarcadeBrawl.ttf'

export const theme = createTheme({
    palette: {
        primary: {
            main: purple[500],
        },
        secondary: {
            main: blue[500],
        },
    },
    typography: {
        fontFamily: 'BarcadeBrawl',
        fontSize: 12,
    },
    components: {
        MuiCssBaseline: {
          styleOverrides: `
            @font-face {
              font-family: 'BarcadeBrawl';
              font-style: normal;
              font-display: swap;
              font-weight: 400;
              src: local('BarcadeBrawl'), local('BarcadeBrawl'), url(${BarcadeBrawl}) format('ttf');
              unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
            }
          `,
        },
      },
});

- Abadlia Ramy

---

你使用的是哪个模块打包工具？不是Webpack吗？ - Gh05d

我也曾经为此苦恼过。 我一直在使用v4中的“覆盖”旧方法，但只需遵循文档即可。当我像这样引用我的“public/fonts”中的字体时，它就起作用了：src: url('/fonts/BarcadeBrawl.woff2') format('woff2'); - Arthur Burgan

@ArthurBurgan 谢谢兄弟，终于在 mui v5 中运行了。 - Abadlia Ramy

根据Arthur的评论，我能够确定我的问题是由于使用TTF字体引起的。我正在使用Next 11和MUI 5，并将两个TTF字体转换为WOFF2使其对我起作用。 - James Hooper

Answer 1

首先，这不是Next.js中配置Webpack的方法。请参考官方文档 - 自定义Webpack配置。其次，file-loader在Webpack v5中已经弃用（新版本的Next.js默认使用），请改用asset modules。

因此，您可能需要执行类似以下操作：

// next.config.js
// https://webpack.js.org/guides/asset-management/#loading-fonts

module.exports = {
  // other configs...

  // future: { webpack5: true }, // -- not needed since Next.js v11.0.0
  webpack(config) {
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      issuer: { and: [/\.(js|ts|md)x?$/] },
      type: 'asset/resource',
    });
    return config;
  },
};

此外，这并非必要。您可以将fonts目录存储在public目录中并使用它们。无需导入它们，可以直接引用，如/fonts/BarcadeBrawl.ttf。参考：静态文件服务。

- brc-dd