Why don't they want to work 2 fonts at the same time?

Question

css

There are 2 fonts that I include. But but they work current when I turn off one of them. What is the problem ? I connect like this:

@font-face {
    font-family: ThinCondensed; 
    src: url(../Fonts/Exo2-ThinCondensed.otf); 
   };
   
  @font-face { 
    font-family: LightCondensed; 
    src: url(../Fonts/Exo2-LightCondensed.otf); 
   };

  А к элементам добавляю так :

   .task_desc > h1 {
  font-size:41px;
  margin:21px auto;
  font-family: LightCondensed; 
}

.task_desc >  ul > li > h1 {
    font-family: ThinCondensed; 
  font-size:41px;
    padding-left: 88px;
}

Answer 1

Define font like this

@font-face {
  font-family: Condensed; 
  font-style: normal;
  font-weight: 100; /* Thin */
  src: url(../Fonts/Exo2-ThinCondensed.otf); 
}

@font-face { 
  font-family: Condensed; 
  font-style: normal;
  font-weight: 300; /* Light */
  src: url(../Fonts/Exo2-LightCondensed.otf); 
}

note without ";" after declaring font-face
use like this

body {
  font-family: Condensed; 
}

.task_desc > h1 {
  font-size:41px;
  margin:21px auto;
  font-weight: 300;
}

.task_desc >  ul > li > h1 {
  font-weight: 100;
  font-size:41px;
  padding-left: 88px;
}

Answer 2

It is not clear from the source data. Make an example on jsfiddle with such a situation.

Answer 3

And how are you going to use them in the future?

.el1 { font-family: ThinCondensed; }
.el2 { font-family: LightCondensed; }