How to edit the card styles of matrial ui in React

it's my first time use the metrialui library and do styles in JavaScript level, I want to do two things but I didn't know how to do it,

1. I want to add stuff on .MuiCardActions-root class such as flex-direction: row reverse

2. I want to add custom font called 29LTAzer-Regular.ttf on this card

Can you please help me Updated thanks to Mr. Joel Hager I solve the second problem related to the font

this is the react code:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { fontSize, textAlign } from '@material-ui/system';

const useStyles = makeStyles({

  overrides: {
    MuiCardActions: {
      root: {
        display: 'flex',
        alignItems:"center",
        padding: 8,
        flexDirection: "row-reverse",
      },
    }
  },
  card: {
    width: 700,
    height:250,
    backgroundColor: "#009CA7",
    color:"white",
    borderRadius: 25,
    margin: 15,
    textAlign: 'right',
    // fontFamily:"LTAzer-Regular", Here I need to set monshat font
  },
  bullet: {
    display: 'inline-block',
    margin: '0 2px',
    transform: 'scale(0.8)',
  },
  title: {
    fontSize: 14,
    color:"white",
  },
  pos: {
    marginBottom: 12,
    color:"white",
  },
  button:{
    color:"white",
    width:50,
    // paddingLeft: 300,
    fontSize: 15,
    border: 3,
    border: "solid #9DCB82",
    textAlign: "center",
    backgroundColor: "#9DCB82",
    // paddingRight: 50,
    flexDirection:"row-reverse"
  },
});

export default function SimpleCard(props) {
  const classes = useStyles();
  const bull = <span className={classes.bullet}>•</span>;

  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography className={classes.title} color="textSecondary" gutterBottom>
          {props.cardType}
        </Typography>
        <Typography variant="h5" component="h2">
          {props.cardName}
        </Typography>
        <Typography className={classes.pos} color="textSecondary">
        {props.cardDate}
        </Typography>
        <Typography variant="body2" component="p">
        {props.cardDesc}
        </Typography>
      </CardContent>
      <CardActions>
        <Button className={classes.button} size="small">details</Button>
      </CardActions>
    </Card>
  );
}