Search code examples
cssfonts

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;

How do I use the weights separately?

Solution

  • 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;
}