Can't load specific Roboto font - css

Question

My problem is very simple and the symptom is weird.
In the head of my HTML, I have included the code to load the font directly from Google Font.
<link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
And this is my CSS:
.text {
font-family: 'Roboto', sans-serif;
color: white;
font-size: large;
}
No matter what customization I choose, the font seems to be the normal font. I tried with Roboto Thin (Roboto:100) and Roboto Thin Italic (Roboto:100i) but none of them actually change.
Is there anything that I miss in my code?

Answer 1

It depends on which font you have from google, in this case:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
You approach to each font weight in CSS like that:
// 300 weight
.text {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
// 400 weight
.text {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
// 700 weight
.text {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}

Answer 2

You are loading Roboto font with 700 font weight and trying to show it with 100 font weight. Embed it with the following URL:
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,400,700" rel="stylesheet">
Using this link, it will work fine for you.
Update: This code snippet will explain you it in detail.
.text {
font-family: 'Roboto', sans-serif;
color: #000;
}
.text-100 {
font-weight: 100;
}
.text-100i {
font-weight: 100;
font-style: italic;
}
.text-400 {
font-weight: 400;
}
.text-700 {
font-weight: 700;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,400,700" rel="stylesheet">
<div class="text text-100">
Hello (Font weight: 100)
</div>
<div class="text text-100i">
Hello (Font weight: 100i)
</div>
<div class="text text-400">
Hello (Font weight: 400)
</div>
<div class="text text-700">
Hello (Font weight: 700)
</div>

Answer 3

You simply need to set the font of your weight in your CSS
.text {
font-weight: 700;
}

Answer 4

First of all load all the fonts-
Just use
font-weight: 100|300|700 /Any one of them/ .
Google fonts basically work with font-weight property. The google fonts are rendered according to the font weight specifications.
For example-
Case 1 - font-weight:100 then thin font will load.
Case 2 - font-weight:300 then light font will load.
Case 3 - font-weight:700 then bold font will load.

Answer 5

In your css file, add:
#import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
at the top.
And, user it in the desired class like:
.class{
font-family: 'Roboto', sans-serif;
font-weight: 700;
}