Puede cambiar la fuente en la biblioteca material-ui@next haciendo lo siguiente. Supongamos que en su <App /> que se define como la siguiente

 // Material UI import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; const App = () => ( <MuiThemeProvider theme={THEME}> <Provider store={store}> <Router history={appHistory} routes={Routes} /> </Provider> </MuiThemeProvider> ); ReactDOM.render(<App />, document.getElementById('app'));

En el accesorio de theme para MuiThemeProvider , proporciona lo siguiente donde

 const THEME = createMuiTheme({ typography: { "fontFamily": `"Roboto", "Helvetica", "Arial", sans-serif`, "fontSize": 14, "fontWeightLight": 300, "fontWeightRegular": 400, "fontWeightMedium": 500 } });

Luego, en algún lugar de su css o de su archivo index.html principal, incluya esta @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

Para obtener una lista de todos los parámetros que puede dar a createMuiTheme Parámetros de tema predeterminados Con respecto a los documentos en sí para cambiar el MuiTheme, son los siguientes. Temas Material UI Siguiente

Con respecto a la parte <Reboot /> , puede consultar la documentación aquí Material UI Reboot Details

**** ACTUALIZACIONES ****

Agregando a la respuesta aceptada por Adeel.

Para los últimos componentes de Material-UI (v4+), se han cambiado las importaciones, así como MuiThemeProvider .

Así que ahora en su App.js , haga lo siguiente:

 import { createMuiTheme } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import './Styles/App.css'; const theme = createMuiTheme({ typography: { fontFamily: [ 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif' ].join(','), } }); class App extends Component { render() { return ( <ThemeProvider theme={theme}> <div className="App"> <MainApp /> </div> </ThemeProvider> ); } } export default App;

Ahora, por ejemplo, he agregado la fuente Nunito . Así que tuve que agregar lo mismo a App.css (que se está importando en App.js ) de la siguiente manera:

 @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v11/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

En MUI v5, también asegúrese de que ThemeProvider y createTheme se importen desde @mui/material/styles y no desde @mui/styles . Estuve atascado durante horas pensando por qué no funciona.

 import { ThemeProvider, createTheme } from '@mui/styles'; ❌ import { ThemeProvider, createTheme } from '@mui/material/styles'; ✅ const theme = createTheme({ typography: { allVariants: { fontFamily: 'serif', textTransform: 'none', fontSize: 16, }, }, }); function App() { return ( <ThemeProvider theme={theme}> ... </ThemeProvider> ); }