Trying to configure Material theme to use my own font and custom font weights/sizes for the Typography components. For the fontWeight section, I want to just be able to input 100/200/300/400/500/600/700 as options for each specific material typography variant, however, it specifically takes in a "string" and it apparently can only be normal/bold/bolder/lighter

And to make it worse normal == 400 while bold == 700 skipping over 500 and 600 which I need

typography: {
    fontFamily: "MyCustomFont",
    fontWeightLight: 200,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
    useNextVariants: true,
    h1: {
      fontSize: "1.25rem",
      fontWeight: "bold",
      lineHeight: "1.2em"
    },
    h2: {
      fontSize: "1.75rem",
      fontWeight: "normal",
      lineHeight: "1.2em"
    },
}

Trying to configure Material theme to use my own font and custom font weights/sizes for the Typography components. For the fontWeight section, I want to just be able to input 100/200/300/400/500/600/700 as options for each specific material typography variant, however, it specifically takes in a "string" and it apparently can only be normal/bold/bolder/lighter

And to make it worse normal == 400 while bold == 700 skipping over 500 and 600 which I need

typography: {
    fontFamily: "MyCustomFont",
    fontWeightLight: 200,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
    useNextVariants: true,
    h1: {
      fontSize: "1.25rem",
      fontWeight: "bold",
      lineHeight: "1.2em"
    },
    h2: {
      fontSize: "1.75rem",
      fontWeight: "normal",
      lineHeight: "1.2em"
    },
}

• javascript
• reactjs
• typescript
• material-ui

• Are you trying to style a Typography element like this: <Typography variant="h6" color="inherit"> or are you trying to style a material-ui element that contain text? – Pedro Vieira Commented Apr 15, 2019 at 16:48

2 Answers 2

I am using the same behavior, with numbers, tested with all the 100/200/300/400/500/600/700 and it worked as well:

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core/';

const THEME = createMuiTheme({
  typography: {
    "fontFamily": "\"MyCustomFont\"",
    "fontSize": 20,
    "lineHeight": 1.5,
    "letterSpacing": 0.32,
    useNextVariants: true,
    suppressDeprecationWarnings: true,
    h6: {
      "fontWeight": 600,
    },
  },
});

<MuiThemeProvider theme={THEME}>
  <Typography variant="h6" color="inherit" align="center" style={{ margin: "1rem" }}>
      "Some text"
  </Typography>
</MuiThemeProvider>

The Box element can help. Ignore the Typography element.

See the code example below

<Box fontWeight="fontWeightLight">…
<Box fontWeight="fontWeightRegular">…
<Box fontWeight="fontWeightMedium">…
<Box fontWeight={500}>…
<Box fontWeight="fontWeightBold">…

See official docs for more details