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.
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas
respostas
Fonte externa
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; }
solução!
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.