Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Tento importar uma fonte do Google Fonts, mas ela não funciona no meu navegador é o Google Chrome. Toda vez em que eu carrego o arquivo .html, ela carrega apenas a fonte padrão.Logo abaixo está meu código HTML e CSS. Alguém pode me ajudar?

HTML:

<!DOCTYPE html>

<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title> Barbearia Alura </title>
    <link rel="stylesheet" href="style.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=Montserrat&display=swap" rel="stylesheet">


</head>

<body>
    <header> 
        <div class="caixa">
             <h1> <img src="logo.png"></h1>
            <nav>
                <ul>
                    <li> <a href="index.html">Home</a></li>
                    <li> <a href="produtos.html">Produtos</a> </li>
                    <li> <a href="contato.html">Contato</a> </li> 
                </ul>
           </nav>
       </div>
    </header> 

    <img class="banner" src="banner.jpg" alt="banner da pagina.">
    <main>
        <section class="principal"> 
                <h2 class="titulo-principal"> Sobre a Barbearia Alura. </h2>

                <img  class="utensilios" src="utensilios.jpg" alt="Utensilios de um barbeiro."> 


                <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

                <p id = "missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

                <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>

        </section>
        <section class="beneficios"> 
                <h3 class="titulo-principal"> Benefícios </h3>

                <ul class="lista-de-servicos">
                    <li class="itens"> Atendimento aos Clientes </li>
                    <li class="itens"> Espaço Diferenciado </li> 
                    <li class="itens"> Localização </li>
                    <li class="itens"> Profissionais Qualificado </li>
                </ul>    

            <img src="beneficios.jpg" class="imagembeneficios">
        </section>
    </main>

    <footer> 
            <img src="logo-branco.png">
            <p class="copyright"> &copy; Copyright Barbearia Alura. - 2022</p> 
    </footer>
</body>

</html>

CSS:
     body{
font-family: 'Montserrat', sans-serif;
}

`

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
solução!

Fala, Dayvid. Você colocou o reset.css depois do style.css e ele está atrapalhando a formatação do seu html. Sempre escreva o reset.css primeiro. Seu head ficará dessa forma:

<head>
    <meta charset="utf-8">
    <title> Barbearia Alura </title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.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=Montserrat&display=swap" rel="stylesheet">


</head>

Muito Obrigado, Felipe!!! Agora funcionou!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software