user6950100 user6950100 - 28 days ago 8
CSS Question

using different font weight of the same google font in css

So I'm looking at this Google font called Roboto

https://fonts.google.com/specimen/Roboto?selection.family=Roboto

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

The site says to import you can do

@import url('https://fonts.googleapis.com/css?family=Roboto');


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('https://fonts.googleapis.com/css?family=Roboto:300,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


and

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


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


but none of them worked. Can anyone help?

Answer

Use the font-weight property

http://www.w3schools.com/cssref/pr_font_weight.asp

Example:

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}