changing font family of all material-ui(version 1) components
You can change the font in material-ui@next library doing the following. Suppose in your <App />
which is defined like the following
// 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'));
In the theme
prop for MuiThemeProvider
you provide the following where
const THEME = createMuiTheme({
typography: {
"fontFamily": `"Roboto", "Helvetica", "Arial", sans-serif`,
"fontSize": 14,
"fontWeightLight": 300,
"fontWeightRegular": 400,
"fontWeightMedium": 500
}
});
Then somewhere in your css
or your main index.html
file include this @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
For a list of all params you can give to createMuiTheme
Default Theme Params Regarding the docs itself for changing the MuiTheme they are as follows. Themes Material UI Next
Regarding the <Reboot />
part you can have a look at the documentation here Material UI Reboot Details
**** UPDATES *****
Adding to the accepted answer by Adeel.
For the latest Material-UI(v4+) components, the imports, as well as MuiThemeProvider
, have been changed.
So now in your App.js
, do the following:
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;
Now for example, I've added the Nunito
font. So I had to add the same to the App.css
(which is being imported in App.js
) in the following way:
@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;
}
This is now the preferred method:
const theme = createMuiTheme({
typography: {
fontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
},
});
As noted here: https://material-ui.com/customization/typography/