Can't load specific Roboto font

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