Não consigo aplicar a fonte no body, somente no root | HTML e CSS: responsividade com mobile-first

Quando mudo a fonte family na tag body, não acontece nada, apenas quando eu a coloco no :root

.cabecalho__menu-hamburguer {
  width: 24px;
  height: 24px;
  background-image: url("../img/Menu.png");
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
}
.cabecalho {
  background-color: var(--branco-principal);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.container {
  display: flex;
  align-items: center;
}
.container__imagem {
  padding: 1em;
}
.lista-menu {
  display: none;
  width:60vw;
}
.container__botao:checked ~ .lista-menu {
  display: block;
  position: absolute;
  top: 100%;
}
.lista-menu__titulo,
.lista-menu__item {
  padding: 1em;
  background-color: var(--branco-principal);
}
.lista-menu__link {
  background: var(--azul-degrade);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
}
.lista-menu__titulo{
  font-weight: 700;
  color:var(--dourado);

}
.container__botao{
  display:none;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF_8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="reset.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />
    <title>AluraBooks</title>
  </head>
  <body>
    <header class="cabecalho">
      <div class="container">
        <input type="checkbox" id="menu" class="container__botao" />
        <label for="menu">
          <span class="cabecalho__menu-hamburguer container__imagem"></span>
        </label>
        <ul class="lista-menu">
          <li class="lista-menu__titulo">Categorias</li>
          <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Programação</a>
          </li>
          <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Front-end</a>
          </li>
          <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Infraestrutura</a>
          </li>
          <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Business</a>
          </li>
          <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Design & UX</a>
          </li>
        </ul>
        <img
          src="img/Logo.svg"
          class="container__imagem"
          alt="Logo da AluraBooks"
        />
      </div>
      <div class="container">
        <a href="#"
          ><img
            class="container__imagem"
            src="img/Favoritos.svg"
            alt="Meus favoritos"
        /></a>
        <a href="#"
          ><img
            class="container__imagem"
            src="img/Compras.png"
            alt="Carrinho de compras"
        /></a>
        <a href="#"
          ><img
            class="container__imagem"
            src="img/Usuario.png"
            alt="Meu perfil"
        /></a>
      </div>
    </header>
  </body>
</html>

Assim não acontece nada

@import url("styles/header.css");

:root{
--cor-de-fundo:#EBECEE;
--branco-principal: #FFFFFF;
--dourado:#EB9B00;
--azul-degrade: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);
--fonte-principal:"Poppins";


}
body{
    background-color: var(--cor-de-fundo);
    font-family: var(--fonte-principal);
    font-size:400px;
    font-weight:400;
}

Assim funciona

@import url("styles/header.css");

:root{
--cor-de-fundo:#EBECEE;
--branco-principal: #FFFFFF;
--dourado:#EB9B00;
--azul-degrade: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);
--fonte-principal:"Poppins";
 font-family: var(--fonte-principal);
}
body{
    background-color: var(--cor-de-fundo);

    font-size:400px;
    font-weight:400;
}