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 the founder of Future Gen AI Services. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.