Roboto font in CSS

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?

2 Answers

  1. Luke- Reply

    2019-11-14

    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.

  2. Marcus- Reply

    2019-11-14

    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 */
    

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>