title: Add self hosted fonts in Material-UI with Next.js
body: <p>I have a problem when I try to add self hosted font in Material UI 5 with Next.js. I got this error:</p>
  <blockquote>
  <p>You may need an appropriate loader to handle this file type, currently
  no loaders are configured to process this file. See
  <a href="https://webpack.js.org/concepts#loaders" rel="nofollow noreferrer">https://webpack.js.org/concepts#loaders</a> (Source code omitted for this
  binary file)</p>
  </blockquote>
  <p>Even I have added <code>file-loader</code> in <code>next.config.js</code> here:</p>
  <pre><code>module.exports = {
    module: {
      rules: [
        {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader'],
      },
      ],
    },
  };
  </code></pre>
  <p>And this is my custom theme:</p>
  <p>PS: my font name in local is <strong>BarcadeBrawl.ttf</strong>.</p>
  <pre><code>import { createTheme } from &quot;@mui/material&quot;;
  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;
              }
            `,
          },
        },
  });
  </code></pre>