Add self hosted fonts in Material-UI with Next.js

Question

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;
            }
          `,
        },
      },
});

I was struggling with this as well. I was using the old way with `overrides` from v4 but simply had to follow the docs. It worked when I referenced the fonts in my `public/fonts` like this: `src: url('/fonts/BarcadeBrawl.woff2') format('woff2');` — Arthur Burgan, Oct 29 '21 at 17:24
Working off of Arthur's comment, I was able to determine that my issue was caused by using TTF fonts. I'm using Next 11 and MUI 5 and converting both TTF fonts to WOFF2 made it work for me — James Hooper, Feb 06 '22 at 10:57

brc-dd · Answer 1 · 2021-09-28T09:39:01.010

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

Add self hosted fonts in Material-UI with Next.js

1 Answers1