有没有办法使用material ui @next React将不同的字体添加到排版中的不同属性

import React from 'react';
import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  customFont: {
    fontFamily: 'Arial',
    fontSize: '16px',
    lineHeight: '1.5',
  },
});

function App() {
  const classes = useStyles();

  return (
    <div>
      <Typography variant="h1" className={classes.customFont}>
        Heading 1 with custom font
      </Typography>
      <Typography variant="body1" className={classes.customFont}>
        Body text with custom font
      </Typography>
    </div>
  );
}

export default App;