Need help with CSS styling problem

Hi!

So here is my HTML code:

  <div class="colors">
    <h2>Colors</h2>
    <p class="cool-blue">Cool Blue<br>#2d5dcc</p>
    <p class="pink">Pink<br>#d957d9</p>
    <p class="mint-green">Mint Green<br>#4fe0b0</p>
    <p class="beige">Beige<br>#efd9ca</p>
  </div>
  <div class="fonts">
    <h2>Fonts</h2>
    <p class="sourcecodepro">
      <span  style="font-style:normal">The quick brown fox jumps over the lazy dog.</span><br>
      <span  style="font-weight:bold">The quick brown fox jumps over the lazy dog.</span><br>
      <span  style="font-style:italic">The quick brown fox jumps over the lazy dog.</span><br>
    </p>
    <p class="nunito">
      <span  style="font-style:normal">The quick brown fox jumps over the lazy dog.</span><br>
      <span  style="font-weight:bold">The quick brown fox jumps over the lazy dog.</span><br>
      <span  style="font-style:italic">The quick brown fox jumps over the lazy dog.</span><br>
    </p>
    <p class="poppins">
      <span  style="font-style:normal">The quick brown fox jumps over the lazy dog.</span><br>
      <span  style="font-weight:bold">The quick brown fox jumps over the lazy dog.</span><br>
      <span  style="font-style:italic">The quick brown fox jumps over the lazy dog.</span><br>
    </p>
  </div>
  <div class="text">
    <h2>Text Styles</h2>
      <h1>H1: Main page heading</h1>
        <ul>
          <li>Font-weight: 700 (bold)</li>
          <li>Font-size: 26px</li>
          <li>Font-family: Nunito Sans</li>
        </ul>
      <h2>H2: Subheading</h2>
        <ul>
          <li>Font-weight: 500</li>
          <li>Font-size: 18px</li>
          <li>Font-family: Poppins</li>
        </ul>
      <p>P: Paragraph text</p>
        <ul>
          <li>Font-weight: 400 (regular)</li>
          <li>Font-size: 14px</li>
          <li>Font-family: Poppins</li>
        </ul>
  </div>
  
</body>  

and here is my CSS:

.colors, .fonts, .text {
border: 2px solid #a2a2a6;
padding: 10px;
margin: 10px auto;
}

h1 {
font-weight: bold;
font-size: 32px;
font-family: “Nunito Sans”;
}

h2 {
font-weight: 500;
font-size: 24px;
font-family: “Nunito Sans”;
font-weight: bold;
}

.nunito {
font-family: “Nunito Sans”;
}

.sourcecodepro {
font-family: “Source Code Pro”;
}

.poppins {
font-family: “Poppins”;
}

p.cool-blue {
background-color: #2d5dcc;
color: #fff;
margin: 20px auto;
line-height: 2.5;
font-family: “Nunito Sans” “Source Code Pro”;
font-size: 36px;
}

p.pink {
background-color: #d957d9;
color:#000;
line-height: 2.5;
font-family: “Nunito Sans” “Source Code Pro”;
font-size: 16px;
}

p.mint-green {
background-color: #4fe0b0;
color: #000;
line-height: 2.5;
font-family: “Nunito Sans” “Source Code Pro”;
font-size: 16px;
}

p.beige {
background-color: #efd9ca;
color: #000;
line-height: 2.5;
font-family: “Nunito Sans” “Source Code Pro”;
font-size: 16px;
}

My question is why p.cool-blue would not accept font-family of Nunito Sans (I’ve imported fonts and it still takes default value of Times New Roman). Only when I input font-family in class .colors it accepts that type of font. Isn’t specificity of p.cool-blue higher than .colors. Even when I make it more specific like div.colors p.cool-blue nothing changes.

Thanks!

Are you sure you imported the font?

You should have something like this inside the head tag

<link href="https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Source+Code+Pro&display=swap" rel="stylesheet">

or this at the top of your code in the css

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans|Source+Code+Pro&display=swap');