How to use a custom font?

[nmaves]

Why are we forced to use fonts bundled with material-ui?

Is there a way to remove or configure this?

[sandorvasas]

Actually, after 6 hours of searching online, digging in lib code and randomly guessing, the conclusion I arrived at: IT IS POSSIBLE! :D

1. create /fonts directory in /public
2. create /public/fonts/fonts.css, that defines the @font-faces:

@font-face {
  font-family: 'inglobal';
  font-weight: normal;
  font-style: normal;
  src: url('./inglobal.ttf');
}

3. add <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css"> to /public/index.html's head

4. Hurray!

4/b. If, for any reason, it still doesn't work, change the fonts' extensions to .css (also at src: url('./OperatorMono.css') )

---

Alternatively, https://material-ui.com/customization/typography/#self-hosted-fonts

[muhammadawaisshaikh]

1. link google fonts in your index.html

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">

2. Add in your body style

/* Styles */
body {
  margin: 0 auto;
  font-family: 'Montserrat';
}

3. few changes in app.js

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  typography: {
    fontFamily: [
      'Montserrat'
    ].join(','),
  },
})

[anuragraina]

Follow these 2 steps to change default font:

Here I'm changing default font to "Open Sans"

1. Import Google Fonts in your index.html

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"/>

2. Do these changes in index.js

import { ThemeProvider } from '@material-ui/styles';
import { CssBaseline } from '@material-ui/core';
import { createMuiTheme } from '@material-ui/core';

const theme = createMuiTheme({ typography: { fontFamily: [ 'Open Sans' ].join(','), }, })

ReactDOM.render(
		<ThemeProvider theme={theme}>
                        <CssBaseline />
			<App />
		</ThemeProvider>,
	document.getElementById('root')
);