How to change font family of typography in React Material UI

Last updated on Nov 2, 2020 by Suraj Sharma



In this tutorial, you will learn to change the font family of the React Material UI components globally.


By default, React Material UI uses the Roboto font to build the components.


We will use a different font Montserrat to override the default font.


First add the following line under the <head></head> in the index.html file in your React project.


<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

Create a theme.js file inside the src folder and paste the following code


import { createTheme } from '@mui/material/styles';

const theme = createTheme({
 
})

export default theme;

createTheme is used to customize the styles of material UI components.


Now, we will override the fontFamily to append our own custom font


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

This applies to all the Typography globally.


If you are looking to change the fontFamily of a particular typography then you can do like this.


const theme = createTheme({
  typography: {
    h1: {
     fontFamily: '"Montserrat", Open Sans',
    }
  }
})

Finally, inside your index.js file paste the following code.


import { ThemeProvider } from '@mui/material/styles';

import App from './App';
import theme from './theme';

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


Related Solutions


Rate this post


Suraj Sharma is a Full Stack Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.