Cant load custom fonts with nextJS

[Altair2169]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I have been trying to load custom fonts in MUI for my nextJS project. But it errors out. According to the docs we need a loader for it parse custom fonts but I haven't been able to find any information related to that. How should I configure Next and MUI to load the fonts?

The only workaround I have been able to find is to define the font family through a global css file. But then the fonts don't work inside components.

Here's my code for theme.ts

import { createTheme } from '@mui/material';
import proximaRegular from './public/fonts/Proxima-Nova.ttf';
import proximaBlack from './public/fonts/Proxima-Nova-Black.otf';
import proximaSBold from './public/fonts/Proxima-Nova-SBold.ttf';

const theme = createTheme({
  typography: {
    fontFamily: 'ProximaRegular, ProximaBlack, ProximaSBold, Arial, Roboto',
  },
  palette: {
    background: {
      default: '#FFD600',
    },
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: `
              @font-face {
          font-family: 'ProximaRegular';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: url(${proximaRegular}) 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;
        }

        @font-face {
          font-family: 'ProximaBlack';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: url(${proximaBlack}) format('otf');
          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;
        }

        @font-face {
          font-family: 'ProximaSBold';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: url(${proximaSBold}) 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;
        }
      `,
    },
  },
});

export default theme;

and here's the error I'm getting during the process

error - ./public/fonts/Proxima-Nova-Black.otf
Module parse failed: Unexpected character '' (1:4)
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)

Expected behavior 🤔

The custom fonts should be loaded

Steps to reproduce 🕹

Steps:

1. import the custom fonts inside theme.ts
2. Create the appropriate style Overrides for them
3. Build the app.

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.67)
  npmPackages:
    @emotion/react: ^11.7.0 => 11.7.0
    @emotion/styled: ^11.6.0 => 11.6.0
    @mui/base:  5.0.0-alpha.59
    @mui/material: ^5.2.3 => 5.2.3
    @mui/private-theming:  5.2.3
    @mui/styled-engine:  5.2.0
    @mui/system:  5.2.3
    @mui/types:  7.1.0
    @mui/utils:  5.2.3
    @types/react: ^17.0.37 => 17.0.37
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2
    typescript: ^4.5.2 => 4.5.2

I'm using Chrome v96

[mnajdova]

This should help - https://stackoverflow.com/questions/60134693/why-is-my-local-font-not-being-applied-with-emotion-global-styling You can define the font face using link and reference it then in the global styles. If I need to guess the URLs are not correct.

[Altair2169]

I tried defining them into the global css file and then had MUI try to access them inside typography.fontFamily but it doesn't seem to work. As when I check the fonts they aren't applied

[Altair2169]

I figured out the problem, I was defining the formats of the font incorrectly, which was why they weren't loading. For others here's how this'll work

in your global css define the fonts

@font-face {
  font-family: 'ProximaRegular';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/Proxima-Nova.ttf') format('truetype');
  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;
}

@font-face {
  font-family: 'ProximaBlack';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/Proxima-Npva-Black.otf') format('opentype');
  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;
}

@font-face {
  font-family: 'ProximaSBold';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/Proxima-Nova-SBold.ttf') format('truetype');
  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;
}

and then refer them inside your theme object as how you do for regular fonts

Thanks

[vileen]

@Altair2169 one note though, there is no such thing as unicoderange, try unicode-range, also I don't think you should every font as font-weight: 400, it could break some third party library if you'd use it

[mkosir]

@Altair2169 thx for posting your solution, it works like charm 🚀