CODEWITHSUNDEEP
javascriptreactjsfontsmaterial-ui
Ben Ahlander
Ben Ahlander

Reputation: 1333

Is there a way to add different fonts to different properties in Typography using material ui @next React

const fontWeightMedium = 500;
const theme = createMuiTheme({
  typography: {
    // Use the system font.
    fontFamily:
    'forzaBook',
    fontWeightMedium,
    body1: {
      fontWeight: fontWeightMedium,
    },
    button: {
      fontStyle: 'italic',
    },
    caption: {
      fontWeight:100
    }
  },
  palette: {
    primary: orange,
    secondary: {
      ...grey,
      // A400: '#00e677',
    },
    contrast: 'white',
    error: red,
  }
});

Here is what I am currently using to change the font and some Typography properties. But I need to change the font for the caption. Does anyone know how to do this?

Upvotes: 2

Views: 3187

Answers (1)

Matt
Matt

Reputation: 3780

You can override the fontFamily on a per Typography-variant basis:

const theme = createMuiTheme({
  typography: {
    fontFamily: 'forzaBook', // Change the default
    caption: {
      fontFamily: "openSans" // Change a specific variant
    }
  },
});

Upvotes: 6

Related Questions