CODEWITHSUNDEEP
cssfontsroboto
Tree Nguyen
Tree Nguyen

Reputation: 1199

Can't load specific Roboto font

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?

Upvotes: 1

Views: 6909

Answers (5)

exoslav
exoslav

Reputation: 2295

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

Upvotes: 2

Aasim Hussain Khan
Aasim Hussain Khan

Reputation: 1147

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

Upvotes: 1

Sahil Dhir
Sahil Dhir

Reputation: 4250

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.

Upvotes: 1

Simrandeep Singh
Simrandeep Singh

Reputation: 585

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>

Upvotes: 2

Adam McKenna
Adam McKenna

Reputation: 2445

You simply need to set the font of your weight in your CSS

.text { 
    font-weight: 700;
}

Upvotes: 1

Related Questions