How Do I Set Custom Fonts For Header, Body, And Button Tags For Material UI?

I am using createMuiTheme to set customize my theme with Material UI. How do I set a specific font for the header, body, and button tags? I'm assuming it would be customizing the t

Solution 1:

Below is the syntax for controlling the font-family for different text variants.

The easiest way to look at the properties available in the theme is to look at the structure of the default theme: https://material-ui.com/customization/default-theme/

const theme = createMuiTheme({
  typography: {
    h1: {
      fontFamily: "Comic Sans MS"
    },
    h2: {
      fontFamily: "Arial"
    },
    h3: {
      fontFamily: "Times New Roman"
    },
    h4: {
      fontFamily: "verdana"
    },
    button: {
      fontFamily: "Comic Sans MS"
    }
  }
});