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?
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>