[Dúvida] A font nao esta aplicando | HTML e CSS: praticando HTML/CSS

HTML
<!DOCTYPE html>
<html>

<head>
    <title>Alura Plus</title>
    <meta chasert="UTF-8">
    <meta name="viewport" content="width-device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.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=Inter&display=swap" rel="stylesheet">
</head>

<body>
    <section class="container principal">
        <div>
            <h1 class="container_titulo">Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
            <img src="img/Combo.png" alt="alura+ aluralingua combo+">
            <a href="www.alura.com.br" class="container_botao">Assine por 12x de R$ 120,00*</a>
            <a href="www.alura.com.br" class="container_botao botao_secundario">Assinar somente o Alura+</a>
            <p class="container_paragrafo">*O preço pode variar caso a assinatura seja feita em outros planos.</p> 
        </div>       
    </section>
</body>

</html>

CSS
:root {
   --branco-principal: #FFFFFF;
   --cinza-secundario: #C0C0C0;
   --botao-azul: #167BF7;
   --cor-de-fundo: #00030C;
   --fonte-principal: 'Inter', sans-serif;
}

* {
    margin: 0;
    padding: 0;
} 

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

.principal {
    background-image: url( img/Background.png );
    background-repeat: no-repeat;
    background-size: contain;

}

.container {
    height: 100vh;
    display:grid;
    grid-template-columns: 50% 50%;
      
}

.container_botao {
    background-color: var( --botao-azul );
    border-radius: 8px;
    color: var( --branco-principal );
    padding: 1em;
    display:block;
    
}

.botao_secundario {
    background-color: transparent;
    border: 2px solid var( --branco-principal );
}

.container_titulo {
    font-size: 28px;
    font-weight: 700;
}