CODEWITHSUNDEEP
cssfonts
Chillin'
Chillin'

Reputation: 182

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?

Upvotes: 6

Views: 10171

Answers (2)

Ojanti
Ojanti

Reputation: 36

What i recommend is have a class that defines the font to be used i.e after importing the google font, in your css add:

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

.robotoriser{
font-family: 'Roboto', sans-serif;
font-weight: Normal; /*  This is just so when ever you call use this class, it uses the normal font weight by default */
}

.rbt-300{ /* you can also name this rbt-light or whatever you like*/
font-weight:300;
}

.rbt-400{
font-weight:400;
}

.rbt-600{
font-weight:600;
}

... and so on.

Then use in html like this

<p class="robotoriser rbt-300" >This is light text</p>

<p class="robotoriser rbt-400" >This is medium text</p>

<p class="robotoriser rbt-600" >This is heavy text</p>

Here is a fiddle to a working demo

Note you can also use it in any class you have e.g

.some_element{
font-family: 'Roboto', sans-serif;
font-weight: 300; /* Or any of the font weight values you included via the Google font url  */
}

<p class="some_element"> Dragons are goats that can fly :D </p>

Upvotes: 0

Mattia Nocerino
Mattia Nocerino

Reputation: 1513

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

Upvotes: 6

Related Questions