CODEWITHSUNDEEP
cssfontsfont-face
Calicoder
Calicoder

Reputation: 1452

How to set the @font-face for a range of font-weights

I want my @font-face to apply to a range, of, say, 0 to 400 font-weight values. It appears that my @font-face applies only to the explicit font-weight specified in it. For example:

@font-face {
   font-family: 'Roboto';
   src: url('Roboto/Roboto-Bold.tff');
   font-weight: 200;
}

If I used:

span { font-weight: 201; font-family: 'Roboto';}

It doesn't apply.

Upvotes: 2

Views: 1410

Answers (4)

Jenish Jerome
Jenish Jerome

Reputation: 352

Saw an article in MDN

@font-face {
    font-family: 'Manrope';
    font-display: auto;
    font-style: normal;
    font-weight: 400 600;
    src: url('URL');
}

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight

Upvotes: 1

lalit bhakuni
lalit bhakuni

Reputation: 627

@font-face {
font-family: Roboto;
src: url(../fonts/Roboto-Bold.eot);
src: url(../fonts/Roboto-Bold.eot?#iefix) format('embedded-opentype'), url(../fonts/Roboto-Bold.woff) format('woff'), url(../fonts/Roboto-Bold.ttf) format('truetype');
font-weight: 700;
font-style: normal;

}

body {
    font-family: Roboto, Arial; font-weight: 100;}

Upvotes: 0

Amr Aly
Amr Aly

Reputation: 3905

try to remove the single quote :

@font-face {
   font-family: Roboto;
   src: url(Roboto/Roboto-Bold.tff);
   font-weight: 200;
}

span { font-weight: 200; font-family: Roboto;}

Upvotes: 0

Calicoder
Calicoder

Reputation: 1452

Apparently there are only 9 valid font-weights.

Upvotes: 1

Related Questions