Sometimes, we want to change the font family of all React Material UI components.

In this article, we’ll look at how to change the font family of all React Material UI components.

How to change the font family of all React Material UI components?

To change the font family of all React Material UI components, we can call the createTheme function provided by Material UI to set the font styles for the theme.

Then we apply the theme with ThemeProvider to apply the styles to the whole app.

For instance, we write:

import React from "react";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { Typography } from "@material-ui/core";

const theme = createTheme({
  typography: {
    fontFamily: [
      "Nunito",
      "Roboto",
      "Helvetica Neue",
      "Arial",
      "sans-serif"
    ].join(",")
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="h3">hello world</Typography>
    </ThemeProvider>
  );
}

We call createTheme with an object that has the typography.fontFamily property.

The property is set to a string with the font we want app to use and any fallback fonts comes after the main font.

Next, we add the ThemeProvider component with the theme prop set to theme to apply the theme styles, which includes the font styles.

And we can use the Typography to add text with the font we want.

Conclusion

To change the font family of all React Material UI components, we can call the createTheme function provided by Material UI to set the font styles for the theme.

Then we apply the theme with ThemeProvider to apply the styles to the whole app.