CODEWITHSUNDEEP
htmlcssfonts
Michael W. Czechowski
Michael W. Czechowski

Reputation: 3455

More than 2 font weights per font family?

By default it is possible to implement different fonts, font weights and styles to be used later in my css styling:

@font-face {
  font-family: "My Font Family";
  src: url("fonts/my-font-family-regular.ttf");
  font-weight: regular;
}

@font-face {
  font-family: "My Font Family";
  src: url("fonts/my-font-family-bold.ttf");
  font-weight: bold;
}

Now I do want to add a light and a medium version:

@font-face {
  font-family: "My Font Family";
  src: url("fonts/my-font-family-light.ttf");
  font-weight: 200;
}

@font-face {
  font-family: "My Font Family";
  src: url("fonts/my-font-family-medium.ttf");
  font-weight: 500;
}

But this does not work for me. Is there a convention about the font weight values?

Upvotes: 2

Views: 742

Answers (2)

moolsbytheway
moolsbytheway

Reputation: 1292

EDIT

If you want just one font name, you can set one font set weight using classes 

@font-face {
  font-family: "myFont";
  src: url("fonts/my-font-family-light.ttf");
  font-weight: 200;
}

   .s1{
     font-family: myFont;
     font-weight: 200;
      }
   .s2{
     font-family: myFont;
     font-weight: 400;
      }
   .s3{
     font-family: myFont;
     font-weight: 600;
      }

Otherwise, assign a different name for each element

@font-face {
  font-family: "myLightFont";
  src: url("fonts/my-font-family-light.ttf");
  font-weight: 200;
}

@font-face {
  font-family: "myMediumFont";
  src: url("fonts/my-font-family-medium.ttf");
  font-weight: 500;
}

Check w3schools for more info

Upvotes: 2

Suraj
Suraj

Reputation: 3137

Yes, There are different font-weight values and if you randomly use any value it will not reflect because they only give same result.

Like

if you give value (100 200 300 400 500 600 700 800 900)

then it will define font weight property thin to thick characters. 400 will be the same as normal and 700 will be the same as bold.

p.normal {
    font-weight: normal;
}

p.light {
    font-weight: lighter;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

Output :

enter image description here

Reference : Click Here

Upvotes: 0

Related Questions