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