#Font-Face with condensed fonts in the same family - css

Question

I have a number of fonts which fall under the same font family name. I need to generate the #font-face for these fonts
Family Name: Test Pro
Font Name: TestPro-Cond
Font Name: TestPro-CondIt
Font Name: TestPro-It
I understand I can create a #font-face with whatever name I want and reference the font files. However I would like to follow the correct web standard. What I am unsure about is how to handle these 'condensed' fonts. Does anyone have experience with this?
Currently I have
#font-face {
font-family: "Test Pro Bold Condensed Italic";
src: url('./fonts/TestPro-BoldCondIt.otf');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Test Pro Bold Italic";
src: url('./fonts/TestPro-BoldIt.otf');
font-weight: normal;
font-style: normal;
}

Answer 1

Condensed fonts actually are basically a different family, if you think about it.
What you're doing is fine, but you can simplify the whole tree like this:
#font-face {
font-family: "Test Pro Condensed";
src: url('./fonts/TestPro-CondReg.otf');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Test Pro Condensed";
src: url('./fonts/TestPro-BoldCondIt.otf');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: "Test Pro";
src: url('./fonts/TestPro-Reg.otf');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Test Pro";
src: url('./fonts/TestPro-BoldIt.otf');
font-weight: bold;
font-style: italic;
}
And then only worry about using font-family: "Test Pro"; etc in your styles with the appropriate font-weight and font-style to trigger the heavier weight and/or italic version. The browser will automatically simulate any combinations you don't include (though it may look bad.)
Last thing, try to use woff and woff2 for the src if possible, the file size is much smaller.

Answer 2

It should be possible using the css property called font-stretch, but at the time of writing it's not covered in all major browsers.
See https://caniuse.com/#feat=css-font-stretch