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 typography ponent in the theme. And then selecting it from the App ponent. But can't find any documentation regarding this.

Theme file:

import { createMuiTheme } from "@material-ui/core/styles";

export default createMuiTheme({
 typography: {
    fontFamily: ["campton-book", "campton-light", "campton-medium"].join(",")
//something here setting specific font family for specific tags?
  }
});

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles, MuiThemeProvider } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Theme from "../Theme";

const styles = theme => ({
  root: {
    flexGrow: 1
  }
});

class Tools extends Component {
  render() {
    const { classes } = this.props;
    return (
      <MuiThemeProvider theme={Theme}>
       <Typography variant="h2">Some text here as h2 and the "campton-light" font family</Typography>
       <Typography variant="body1">Some text here as body1 and the "campton-book" font family</Typography>
       <Typography variant="overline">Some text here as overline and the "campton-medium" font family</Typography>
      </MuiThemeProvider>
    );
  }
}

Apps.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Apps);

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 typography ponent in the theme. And then selecting it from the App ponent. But can't find any documentation regarding this.

Theme file:

import { createMuiTheme } from "@material-ui/core/styles";

export default createMuiTheme({
 typography: {
    fontFamily: ["campton-book", "campton-light", "campton-medium"].join(",")
//something here setting specific font family for specific tags?
  }
});

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles, MuiThemeProvider } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Theme from "../Theme";

const styles = theme => ({
  root: {
    flexGrow: 1
  }
});

class Tools extends Component {
  render() {
    const { classes } = this.props;
    return (
      <MuiThemeProvider theme={Theme}>
       <Typography variant="h2">Some text here as h2 and the "campton-light" font family</Typography>
       <Typography variant="body1">Some text here as body1 and the "campton-book" font family</Typography>
       <Typography variant="overline">Some text here as overline and the "campton-medium" font family</Typography>
      </MuiThemeProvider>
    );
  }
}

Apps.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Apps);

• javascript
• reactjs
• material-ui

1 Answer 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./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"
    }
  }
});