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.
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