react-admin add font with override MuiCssBaseline @global @font-face not working

Question

I am trying to add the NotoSansSC-Regular.otf from Google to react-admin so that the default font for simplified Chinese will be that. I have successfully got it working if I do a CSS include of the fonts in the root html file, via a:

  typography: {
    fontFamily: ["Roboto", "Helvetica", "Arial", "sans-serif", "notasansregular"].join(","),
  },

In my themes. All the examples I found suggest I can also get this working via:

import notasansregular from "../../public/fonts/chinese/NotoSansSC-Regular.otf";
...
const notafont = {
  fontFamily: "notasansregular",
  fontStyle: "normal",
  fontWeight: "normal",
  src: `
    url(${notasansregular}) format('opentype')
  `,
};
...
const myTheme = {
...
  overrides: {
    MuiCssBaseline: {
      "@global": {
        "@font-face": [notafont],
      },
    },
...
}

But absolutely nothing I tried got it working, including using the same URL (just the bare filename in the url('NotoSansSC-Regular.otf')), which is exactly what is working when I include via CSS in the index.html.

A few of the examples I saw put the <CssBaseline /> directly inside a ThemeProvider in the JSX but react-admin has in a place it is very inconvenient to try and override, given I have no idea whether this is the issue and placing it in other possible places (outside or inside <Admin />) make no difference.

Answer 1

If you are using Mui v5, the syntax is slightly different:

const myTheme = createTheme({
  components: { // not overrides!
    MuiCssBaseline: {
      styleOverrides: `
        @font-face {
          font-family: 'Noto Sans SC';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: local('NotoSansSC'), 
               local('NotoSansSC-Regular.otf'), 
               url(${notasansregular}) format('otf');
          unicodeRange: // the unicode range for SC
        }
      `,
    },
  },
})

ETA: Mui 4 demo