More than 2 font weights per font family? - html

Question

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?

Answer 1

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

Answer 2

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 :
Reference : Click Here