I am attempting to integrate the NotoSansSC-Regular.otf font from Google into my react-admin application as the default font for simplified Chinese text. I have managed to make it work by including the fonts in the root HTML file using CSS, like this:
typography: {
fontFamily: ["Roboto", "Helvetica", "Arial", "sans-serif", "notasansregular"].join(","),
},
However, all the resources I came across suggest that I should also be able to achieve the same result through the following method:
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],
},
},
...
}
Despite trying various approaches, including using different URLs and simplifying the font path in the url('NotoSansSC-Regular.otf'), I still cannot get it to work. This is frustrating especially because a few examples I found placed the <CssBaseline /> directly within a ThemeProvider in the JSX code. However, in the case of react-admin, the placement seems to be causing some inconvenience as implementing it inside or outside the <Admin /> component does not yield any results either.