Add self hosted fonts in Material-UI with Next.js [duplicate] - reactjs

Question

This question already has answers here:
Self-hosted fonts using NextJS
(4 answers)
Closed 1 year ago.
I have a problem when I try to add self hosted font in Material UI 5 with Next.js. I got this error:
You may need an appropriate loader to handle this file type, currently
no loaders are configured to process this file. See
https://webpack.js.org/concepts#loaders (Source code omitted for this
binary file)
Even I have added file-loader in next.config.js here:
module.exports = {
module: {
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader'],
},
],
},
};
And this is my custom theme:
PS: my font name in local is 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;
}
`,
},
},
});

Answer 1

Firstly, that's not how Webpack is configured in Next.js. Refer the official documentation on this - Custom Webpack Config. Secondly, file-loader is deprecated for Webpack v5 (the default for newer Next.js versions). Use asset modules instead.
So you probably need to do something like this:
// 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;
},
};
Moreover, this is not necessary, you can simply store your fonts directory in public directory and use them. There is no need to import them. They can be directly referenced like /fonts/BarcadeBrawl.ttf. Refer: Static File Serving