how to select the two different class inside a parent class?

I'm trying to select the class .signup-choose-subtitle and .signup-choose-list li in my parent class of signup-choose-card-content to apply the font-family.

This is my code in css

.ja_jp 
.signup-container 
.signup-content 
.signup-choose-card-content 
.signup-choose-subtitle 
.signup-choose-list li 
{   
    font-family: "M+1C", Roboto, sans-serif; 
}

and code in the html

<div class="signup-choose-card-content">
   <p class="signup-choose-subtitle" translate="">Easy registration in 15 seconds! Play now!</p>
   <p class="signup-choose-text-highlight">Lite</p>

   <ul class="signup-choose-list">
       <li translate="">No identity verification required</li>
       <li translate="">Over 2,000 games</li>
   </ul>
</div>

My goal is to overwrite the existing font-family: "Bahnschrift", Roboto, sans-serif; to font-family: "M+1C", Roboto, sans-serif; like this image:

Option 1

Target specific elements that are nested within the .signup-choose-card-content element.

.signup-choose-card-content .signup-choose-subtitle,
.signup-choose-card-content .signup-choose-list li {
  font-family: "M+1C", Roboto, sans-serif;
}

See the snippet below.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.signup-choose-card-content .signup-choose-subtitle,
.signup-choose-card-content .signup-choose-list li {
  font-family: "M+1C", Roboto, sans-serif;
  color: red;
}

<!-- language: lang-html -->

<div class="signup-choose-card-content">
   <p class="signup-choose-subtitle" translate="">Easy registration in 15 seconds! Play now!</p>
   <p class="signup-choose-text-highlight">Lite</p>

   <ul class="signup-choose-list">
       <li translate="">No identity verification required</li>
       <li translate="">Over 2,000 games</li>
   </ul>
</div>

<!-- end snippet -->

Option 2

Target all elements within the .signup-choose-card-content element by using the direct child selector (i.e., >) except paragraphs with the class signup-choose-text-highlight.

.signup-choose-card-content > :not(p.signup-choose-text-highlight) {
  font-family: "M+1C", Roboto, sans-serif;
}

See the snippet below.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.signup-choose-card-content > :not(p.signup-choose-text-highlight) {
  font-family: "M+1C", Roboto, sans-serif;
  color: red;
}

<!-- language: lang-html -->

<div class="signup-choose-card-content">
   <p class="signup-choose-subtitle" translate="">Easy registration in 15 seconds! Play now!</p>
   <p class="signup-choose-text-highlight">Lite</p>

   <ul class="signup-choose-list">
       <li translate="">No identity verification required</li>
       <li translate="">Over 2,000 games</li>
   </ul>
</div>

<!-- end snippet -->

According to your description you would probably want it this way (I added the border-property for better visibility druing development):

.signup-choose-card-content > .signup-choose-list li,
.signup-choose-card-content > .signup-choose-subtitle {
        border: 4px solid red ;

}

With the child combinator you can select direct children of classes/elements etc, see here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
> The child combinator (>) is placed between two CSS selectors.