Oi pessoal, eu utilizei um tipo de fonte para o texto e os títulos da página e no nav quero usar uma fonte diferente, mas quando recarrego no navegador não é aplicada.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Oi pessoal, eu utilizei um tipo de fonte para o texto e os títulos da página e no nav quero usar uma fonte diferente, mas quando recarrego no navegador não é aplicada.
Olá Letícia, tudo certo?
Que tal colocar o seu código HTML e CSS aqui para tentarmos descobrir o que está de errado?
Clica no botão inserir código e cola eles aqui.
</head>
<body>
<header>
<div class="caixa">
<h1><img src="logo.png" alt="logo da Barbearia Alcapone"></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="ambiente" src="ambiente.jpg">
<main class="alinhamento">
<section class="principal">
<h3 class="tituloprincipal">Sobre nós</h3>
<img class="tesoura" src="tesoura.png" alt="Utensílio de um barbeiro">
<p class="texto">Localizada no coração da cidade a Barbearia alcapone traz para o mercado o que há de melhor para o seu cabelo e barba.
em 2019, a Barbearia Alcapone já é destaque na cidade e conquista novos clientes a cada dia.</p>
<p class="texto">Nossa missão é: "Proporcionar auto-estima e qualidade de vida aos clientes"</p>
<p class="texto">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="tituloprincipal">Nosso estabelecimento</h3>
<p class="texto">Nosso estabelecimento está localizado no coração da cidade</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3698.6531407341045!2d-47.904388984516956!3d-22.024597485467442!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94b87740a691e4b5%3A0xfab0e5ad7c638fc0!2sBarbearia%20Alcapone!5e0!3m2!1spt-BR!2sbr!4v1578537480143!5m2!1spt-BR!2sbr" width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</section>
<section class="beneficios">
<h3 class="tituloprincipal">Benefícios</h3>
<div class="conteudobeneficios">
<ul class="listabeneficios">
<li class="itens">Atendimento aos clientes</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="corte.jpg" class="corte">
</div>
<div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</section>
</main>
<footer>
<p class="copyright">© Copyright Barbearia Alcapone - 2020</p>
</footer>
</body>
header { font-family: 'Montserrat', sans-serif;
}
.texto { font-family: 'Montserrat', sans-serif; }
.itens { font-family: 'Montserrat', sans-serif; line-height: 2.5; }
.itens:before { content: "✦"; }
.beneficios { padding: 3em 0; width: 940px; margin: 0 auto; }
.conteudobeneficios { width: 640px; margin: 0 auto; }
.listabeneficios { width: 40%; display: inline-block; vertical-align: top; }
form { font-family: 'Montserrat', sans-serif; }
header { background-color: #979797; padding: 30px }
.caixa { position: relative; margin: 0 auto;
}
nav { position: absolute; top: 120px; right: 0px
}
nav a:hover { color: #CD272D; text-decoration: underline; }
nav li { display: inline; margin: 0 0 0 50px; position: relative; left: 100px;
}
nav a { text-transform: uppercase; color: #000000; font-weight: bold; font-size: 24px; text-decoration: none; font-family: Georgia; position: relative; right: 500px; top: 100px;
}
main ul { margin: 40px 40px 40px;
}
.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: 50px 15px; box-sizing: border-box; border-color: #000000; border-width: 5px; border-style: solid; border-radius: 20px;
}
.produtos li:hover h2 { font-size: 45px; }
.produtos li:hover { border-color: #CD272D; }
.produtos li:active { border-color: #CC8E29;}
.produtos h2 { font-size: 34px; font-family: 'Montserrat', sans-serif; font-weight: bold; }
.produto-preco { font-size: 50px; font-weight: bold; margin-top: 10px; font-family: 'Montserrat', sans-serif; }
footer { text-align: center; background-color: #000000; padding: 40px 0; }
.copyright { color: #FFFFFF; font-size: 13px; margin: 20px 0 0; }
main { width: 940; margin: 0 auto; }
form { margin: 40px 250px;
}
form label, form legend { display: block; font-size: 20px; margin: 0 0 10px; }
.contato { margin: 20px 0; }
.inputpadrao { display: block; margin: 0 0 20px; padding: 10px 20px; width: 30%; }
.checkbox{ margin: 20px 0; }
.enviar { width: 30%; padding: 20px 0; background-color: #CD272D; color: #FFFFFF; font-weight: bold; font-size: 25px; border: none; border-radius: 8px; transition: 1s; cursor: pointer; }
.enviar:hover { background-color: rgb(177, 35, 40); transform: scale(0.8); }
table { margin: 20px 250px 40px; }
thead { background-color: #CC8E29; color: #FFFFFF; font-weight: bold; }
td, th { border: 1px solid #000000; padding: 8px 15px; }
/* CSS da página inicial*/
.ambiente { width: 50%; margin: 10px 460px; }
.tituloprincipal { text-align: center; font-size: 2em; margin: 0 0 1em; clear: left; font-family: 'Calistoga', cursive; }
.principal { background: #FEFEFE; width: 940px; margin: 0 auto; }
.principal p { margin: 0 0 1em; }
.corte { width: 30%; }
.tesoura { width: 100px; float: left; margin: 0 20px 20px 0 ; }
.alinhamento { bac }
.mapa { margin: 3em 0; width: 940px; margin: 0 auto; }
.mapa p { margin: 0 0 2em; text-align: center; }
.video { width: 560px; margin: 2em auto; }
Olá Letícia, tudo certo?
Aqui apareceu direitinho as fotes.
No 'Nav' a fonte é Georgia e no texto a fonte é 'Montserrat'.
Eu só recomendaria você colocar um fallback na fonte do nav, dessa maneira:
font-family: Georgia, 'Times New Roman', Times, serif;
Outra recomendação, tendo em vista que você escreveu esse atributo várias vezes:
font-family: 'Montserrat', sans-serif;
seria colocar desta forma:
header, .texto, .itens, .produtos h2 {
font-family: 'Montserrat', sans-serif;
}
Isso facilita a manutenção do código. Imagina se você tiver que trocar a fonte em cada um deles!?
Espero ter ajudado!
Muito obrigada, Diego! Sua ajuda me deu um insight para resolver outro problema.