How to load a self-hosted font in React and Material Ui? - reactjs

Question

I'm trying to load a self hosted font in a react project. I'm running it under development mode (npm run start) and not in production. I've followed the instructions on the official site of Material UI but had no success. My fonts are stored in path/to/react-project/src/fonts folder. This is an ecxerpt of my code:
import { ThemeProvider, createTheme } from '#mui/material/styles';
import ProximaNovaReg from '../fonts/Proxima-Nova-Reg.ttf';
import ProximaNovaIt from '../fonts/Proxima-Nova-It.otf';
import ProximaNovaBold from '../fonts/Proxima-Nova-Bold.otf';
import FuturaBold from '../fonts/Futura-Bold.ttf';
const theme = createTheme({
typography: {
fontFamily: [
'Proxima-Nova',
'sans-serif',
].join(','),
},
components: {
MuiCssBaseline: {
styleOverrides: `
#font-face {
font-family: 'Proxima-Nova';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(${ProximaNovaReg}) format('truetype')
}
#font-face {
font-family: 'Proxima-Nova';
font-style: italic;
font-display: swap;
font-weight: 400;
src: url(${ProximaNovaIt}) format('otf')
}
#font-face {
font-family: 'Proxima-Nova';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(${ProximaNovaBold}) format('otf')
}
#font-face {
fontFamily: 'Futura';
fontStyle: 'normal';
fontDisplay: 'swap';
fontWeight: 700;
src: url(${FuturaBold}) format('truetype')
}
`,
},
},
});
// ...
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Box
sx={{
fontFamily: 'Proxima-Nova',
}}
>
Proxima-Nova
</Box>
</ThemeProvider>
);
package.json: "#mui/material": "^5.10.1"
What am I doing wrong?