Search code examples
material-uiroboto

Different variants of font Roboto in material-ui components

I'm using material-ui components latest version. In doc's they say that you have to put this line of code 

href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"

in your index.html to be able to use font Roboto. My question is how to apply different variants (i.e. regular, bold, medium, black, light) of Roboto font for different components?

Solution

  • In the page Material-UI Typography, the Roboto:300, 400, 500 applies to Material-UI default Typography.

    In your case, you can change fontFamily to Roboto and fontWeight to 100, 300, 400, 700 and 900 in order use light/regular/black Roboto font. Also, wrap them with HTML or tag if you want to make it bold or italic.

    For example, 

    <Typography variant="h6" style={{fontWeight: "700",fontFamily: "Roboto"}}>
  This is stack overflow
</Typography>