Não funciona a minha fonte e nem o negrito Alura Books

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,0">
        <title>AluraBooks</title>
        <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">
        <link
         href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,700&display=swap" rel="stylesheet">
       <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
        <link rel="stylesheet" href="styles.css">

    </head>

styles css

@import url("styles/header.css");
@import url("styles/banner.css");
@import url("styles/carrossel.css");
@import url("styles/tópicos.css");
@import url("styles/contato.css");
@import url("styles/rodapé.css");

:root{
    --cor-de-fundo:#EBECEE;
    --branco: #FFFFFF;
    --laranja:#EB9B00;
    --azul-degrade:linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);
    --fonte-princial:"Poppins";
    --azul:#002F52;
    --fonte-secundaria:"Josefin Sans", sans-serif;

header css

@media screen and ( min-width:1024px) {
    .container__titulo, .container__titulo--negrito{
        font-family: var(--fonte-secundaria);
        font-size: 30px;
    }
    .container__titulo{
        font-weight: 400;
    }
    .container__titulo--negrito{
        font-weight: 700;
    }
}

Oi, Raphael! Como vai?

Vamos resolver isso. O problema pode estar nesses pontos:

Google Fonts da Josefin Sans está importando apenas itálico 700. Para o negrito normal (700) funcionar, importe wght 400;700 (estilo normal).
No :root, há dois ajustes:
- Falta de } no final do bloco.
- Variável com typo: --fonte-princial → --fonte-principal.
No <meta viewport>, use initial-scale=1.0 (com ponto).

Ajuste seu código assim:

<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Se tiver qualquer dúvida você pode consultar o código da aula:

Código da aula

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!