Roboto font in CSS

Question

I would like to use "Roboto" font in prestashop. I've received design in .psd files and graphic designer used fonts "Roboto Medium" and "Roboto Regular". Do i understand correctly, that when i want to use Roboto Normal I can apply:

font- family: "Roboto"
font-weight: 400

and when i want to use Roboto Medium I should apply:

font- family: "Roboto"
font-weight: 500

In other words, are weights 400 and 500 respectively equal to Roboto Normal and Roboto Medium?

Answer 1

Make sure you are closing your CSS lines.

font-family: "Roboto";
font-weight: 400;

Yes, your weights are correct.

font-weight: 400; //normal
font-weight: 500; //medium
font-weight: 700; //bold

Please read this regarding font-weight, it's not always available depending on the font. But, according to Google, you should be able to use those weights without a problem.

Answer 2

I was a little confused by this initially as well.

I had a client request and per their style guide I needed to set fonts accordingly for "Roboto", "Roboto Medium", "Roboto Light", etc.

Looking at Google's font site ( https://fonts.google.com/specimen/Roboto ) They show the "Roboto" font, then examples of each variation of it "Medium", "Light", etc.

But it's not obvious that this involves two settings in CSS. My initial thought was that you set it like this:

* {font-family: 'Roboto Light', 'Roboto Medium', 'Roboto', etc}

But after experimenting and a little research, it involves two settings, one to specify the core "family" then the variation is the "weight" like this:

.Roboto{font-family:'Roboto';font-weight:400;} /* 400 is industry standard for normal */

.RobotoLight{font-familiy:'Roboto';font-weight:300;} /* 300 is industry standard for normal */

.RobotoMedium{font-family:'Roboto';font-weight:500;} /* 500 is industry standard for normal */