Self-host font added in Material-UI not working? - reactjs

Question

I'm working on a Material-UI based project and trying to add some self-hosted fonts, since they're not available as google fonts. I've followed both the Material-UI and JSS docs, and I've come up with the following, but I can't find the reason why it's still not working. There are no errors either to give me a clue as to what's wrong.
import { createMuiTheme } from "#material-ui/core/styles";
import Windlass from "./fonts/Windlass.eot";
import Windlass2 from "./fonts/Windlass.woff";
const theme = createMuiTheme({
...
typography: {
useNextVariants: true,
fontFamily: [
'Windlass',
'Helvetica Neue',
'Helvetica'
].join(','),
fontSize: 16,
fontWeightLight: 400,
fontWeightRegular: 400,
fontWeightMedium: 600,
fontWeightBold: 700},
overrides: {
MuiCssBaseline: {
'#global': {
'#font-face': {
fontFamily: 'Windlass',
src: `url(${Windlass})`,
fallbacks: [
{src: `url(${Windlass}?#iefix) format(embedded-opentype)`},
{src: `url(${Windlass2}) format(woff)`}
]
}
}
}
}
});
export default theme;
The font name does seem to show up in the css when I inspect the element as
font-family: Windlass,Helvetica Neue,Helvetica;
but the text shows up as Helvetica Neue.

Answer 1

In case someone stumbles on this post.
Here is another way to add fonts to the Material UI theme. I followed the steps from the MUI webiste.
https://material-ui.com/customization/typography/
///myAwesomeFont.ts
import myAwesomeFontEot from '../assets/fonts/myAwesomeFont.eot';
import myAwesomeFontWoff from '../assets/fonts/myAwesomeFont.woff';
import myAwesomeFontWoff2 from '../assets/fonts/myAwesomeFont.woff2';
import myAwesomeFontBoldEot from '../assets/fonts/myAwesomeFont-Bold.eot';
import myAwesomeFontBoldWoff from '../assets/fonts/myAwesomeFont-Bold.woff';
import myAwesomeFontBoldWoff2 from '../assets/fonts/myAwesomeFont-Bold.woff2';
const myAwesomeFontRegular = {
fontFamily: 'myAwesomeFont',
fontStyle: 'normal',
fontWeight: 400,
src: `local('myAwesomeFont-Regular'),
url(${myAwesomeFontEot}),
url(${myAwesomeFontWoff}) format('woff'),
url(${myAwesomeFontWoff2}) format('woff2')`,
};
const myAwesomeFontBold = {
fontFamily: 'myAwesomeFont',
fontStyle: 'normal',
fontWeight: 700,
src: `local('myAwesomeFont-Bold'),
url(${myAwesomeFontEot}),
url(${myAwesomeFontWoff}) format('woff'),
url(${myAwesomeFontWoff2}) format('woff2')`,
};
export default [myAwesomeFontRegular, myAwesomeFontBold]
In Your theme provider file.
//default.theme.ts
import { createMuiTheme, Theme } from '#material-ui/core/styles';
import myAwesomeFontArray from './myAwesomeFont';
const theme: Theme = createMuiTheme({
typography: {
fontFamily: "myAwesomeFont, sans-serif",
fontSize: 16
},
overrides: {
MuiCssBaseline: {
'#global': {
'#font-face': [...myAwesomeFontArray],
},
},
},
});
After you've set this up. Open up your developer tools on the browser and verify that they're indeed being downloaded. This worked for me. I hope it works for you.

Answer 2

this is my config and it work, you need declare the font in index.css like this.
theme.js
import { createMuiTheme } from "#material-ui/core/styles";
// import gliberPath from "./Gilbert_Bold-Preview_1004.woff2"; // this is no need to add
let palette1 = {
type: "light"
};
let palette2 = {
type: "light"
};
// this is no need to add
// const gliber = {
// fontFamily: "Gliber",
// fontStyle: "normal",
// fontDisplay: "swap",
// fontWeight: 400,
// src: `
// local('Gliber'),
// url(${gliberPath}) format('woff2')
// `,
// };
const typography = {
fontFamily: ["Gliber","Roboto"].join(","), // there need add Gliber reference,your font family name should be place the first position
// this is no need to add
// overrides: {
// MuiCssBaseline: {
// "#global": {
// "#font-face": ['Gliber']
// }
// }
// }
};
let theme1 = createMuiTheme({ palette: palette1, typography });
let theme2 = createMuiTheme({ palette: palette2, typography });
export { theme1, theme2 };
index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
/*add self host font */
#font-face {
font-family: 'Gliber';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./theme/Gilbert_Bold-Preview_1004.woff2') format('woff2');
}