user6950100 user6950100 - 3 months ago 24
CSS Question

using different font weight of the same google font in css

So I'm looking at this Google font called Roboto

It comes in different styles such as light, regular, medium, etc.

The site says to import you can do

@import url('');

and then in your style sheet you can do:

font-family: 'Roboto', sans-serif;

Well, thats fine, but I need a mixture of them. Such as light, and regular, not just one.

So I can do

@import url(',400,500');

and this selects them all.

But it still says in the style sheet you can do:

font-family: 'Roboto', sans-serif

If you do that, then it just sticks to the first one. I need one style to be 300, one to 400, one to be 500. So how do I specify which one in the css?

I've tried doing

font-family: 'Roboto:300', sans-serif


font-family: 'Roboto 300', sans-serif

font-family: 'Roboto-300', sans-serif

but none of them worked. Can anyone help?


Use the font-weight property


p.normal {
    font-weight: normal;

p.thick {
    font-weight: bold;

p.thicker {
    font-weight: 900;