4
respostas

Fonte da Página

No curso ensina como alterar a fonte retirando o link do Google Fonts, mas quando aplico no meu html e css não altera, o que estou fazendo de errado?

Coloquei dentro do

E no css 

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

}

Não muda na página
4 respostas

Oi Paulo Henrique, tudo tranquilo?

Então, manda a parte em HTML também por favor.

Talvez você esqueceu de linkar o arquivo CSS com HTML.

Olá Paulo, boa tarde!

Pelo código acima, não da para entender muito bem o que ocorreu no HTML. Mas pode ser que esteja faltando alguma tag de linkagem disponibilizada pelo Google Fonts no seu HTML / CSS.

</head>
<main>
    <section class="principal">
        <h2 class="titulo-principal"> Sobre a Barbearia Alura</h2>

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

        <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 unhas. Fundada em 1080, a Hair Salon 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="mapa">
            <h3 class="titulo-principal">Nosso estabelecimento</h3>
            <p> Nosso estabelecimento está localizado no coração da cidade.</p>
            <div class="mapa-conteudo">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1846.3294060075177!2d-50.69575197447743!3d-22.253020475442213!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x949454c3d6e4ef87%3A0x180e77ff8fe3463d!2zUXVhdMOhLCBTUA!5e0!3m2!1spt-BR!2sbr!4v1638556150552!5m2!1spt-BR!2sbr" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
            </div>


    </section>


    <section class="beneficios">
        <h3 class="titulo-principal">Beneficios</h3>

        <div class="conteudo-beneficios">

            <ul class="lista-beneficios">
                <li class="itens">Atendimento ao Cliente</li>
                <li class="itens">Espaço Diferenciado</li>
                <li class="itens">Localização</li>
                <li class="itens">Profissionais Qualificados</li>
                <li class="itens">Pontualidade</li>
                <li class="itens">Limpeza</li>
            </ul><img src="beneficios.jpg" class="imagem-beneficios">

        </div>

        <div class="video">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </section>

© Copyright Barbearia Alura - 2021


css

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

header { background: #BBBBBB; padding: 20px 0; }

.caixa { position: relative; width: 940px; margin: 0 auto; }

nav { position: absolute; top: 110px; right: 0; }

nav li { display: inline; margin: 0 0 0 15px; }

nav a { text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; }

nav a:hover { color: #C78C19; text-decoration: underline; }

.produtos { width: 940px; margin: 0 auto; padding: 50px 0; }

.produtos li { display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border: 2px solid #000000; border-radius: 10px; }

.produtos li:hover { border-color: #C78C19; }

.produtos li:active { border-color: #088C19;}

.produtos li:hover h2 { font-size: 34px; }

OBS: tive que apagar uma parte do código no css por não caber aqui

Olá Paulo, tudo bem? Para fazer link da fonte que deseja usar no css sem necessariamente precisar fazer download, basta usar o método @import no seu HTML ou CSS.

O próprio Google te entrega o link @import pronto para ser usado. Para isso, basta acessar o Google fonts, selecionar a tipografica desejada, clicar em 'select this style', que aparece a direita do weigth da fonte.

Após isso, irá aparecer uma aba na lateral direita da página, com dois input radio, com as opções:

'' '@import'

selecione o @import e copie seu conteúdo, usando de exemplo a fonte 'Roboto regular weigth 400', o link se parecerá com esse:

<!--NO SEU HTML: HEAD-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>

Basta colar no seu head, ou retirar as tags 'style' e colocar somente o @import NA PRIMEIRA LINHA DO SEU CSS, pois no CSS a ordem que as informações são passadas conta para a maneira que o estilo é aplicado, e para isso é importante que a referência da fonte seja declarada antes da estilização.

No CSS ficaria dessa maneira:

/*NO SEU CSS*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

Lembrando: estou usando a fonte Roboto de exemplo, não necessariamente é a mesma fonte que você está buscando.

Espero ter ajudado, continue estudando. Forte abraço!

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