Solucionado
Hola a todos no se si hice bien, resulta que seguí los pasos exactos eligiendo el selector body en CSS para cambiar la fuente, pero no lo tomó, así que decidí adicionarle a body el id="body" en HTML e hice los cambios en CSS #body esto me funcionó finalmente. ¿Está bien o tengo algo mal que interfiera en el primer selector?
Hola como estás?
Puedes compartir tu código por favor, tanto el html como el css, así podemos ver la causa del por qué no funcionó cuando apuntaste para la etiqueta body
Si necesitas ayuda, estaremos aquí! Un saludo!
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Barbería 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:wght@300&display=swap" rel="stylesheet">
</head>
<body id="body">
<header>
<div class="caja">
<h1><img src="imagenes/logo.png" alt="Logo de la Barbería Alura"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="productos.html">Productos</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<img class="banner" src="banner/banner.jpg">
<main>
<section class="principal">
<h2 class="titulo-principal">Sobre la Barbería Alura</h2>
<img class="utensilios" src="imagenes/utensilios.jpg" alt="Utensilios de un Barbero.">
<p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae para el mercado lo que hay de
mejor para su cabello y barba. Fundada en 2020, la Barbería Alura ya es destaque en la ciudad y
conquista nuevos clientes diariamente.</p>
<p id="mision"><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a nuestros
clientes"</strong>.</em></p>
<p>Ofrecemos profesionales experimentados que están constantemente observando los cambios y movimiento en el
mundo de la moda, para así ofrecer a nuestros clientes las últimas tendencias. El atendimiento posee un
padrón de excelencia y agilidad, garantizando calidad y satisfacción de nuestros clientes.</p>
</section>
<section class="mapa">
<h3 class="titulo-principal">Nuestra Ubicación</h3>
<p>Nuestro establecimiento está ubicado en el corazón de la ciudad</p>
<div class="mapa-contenido">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.449977466502!2d-46.63452058487057!3d-23.58818986846902!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Education%20and%20Innovation!5e0!3m2!1ses-419!2sco!4v1660864388928!5m2!1ses-419!2sco"
width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</section>
<section class="diferenciales">
<h3 class="titulo-principal">Diferenciales</h3>
<div class="contenido-diferenciales">
<ul class="lista-diferenciales">
<li class="items">Atención personalizada a los clientes</li>
<li class="items">Espacio diferenciado</li>
<li class="items">Localización</li>
<li class="items">Profesesionales calificados</li>
<li class="items">Puntualidad</li>
<li class="items">Limpieza</li>
</ul><img src="diferenciales/diferenciales.jpg" class="imagen-diferenciales">
</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>
</main>
<footer>
<img src="imagenes/logo-blanco.png" alt="Logo de la Barbería Alura">
<p class="copyright">© Copyright Barbería Alura - 2020</p>
</footer>
</body>
</html>
/////////////////////////
#body {
font-family: 'Montserrat', sans-serif;
}
header {
background-color: #BBBBBB;
padding: 20px 0;
}
.caja{
width: 940px;
position: relative;
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;
}
.productos{
width: 940px;
margin: 0 auto;
padding: 50px;
}
.productos 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;
}
.productos li:hover{
border-color:#c78c19;
}
.productos li:active{
border-color:#088c19;
}
.productos h2{
font-size: 30px;
font-weight: bold;
}
.productos li:hover h2{
font-size: 33px;
}
.producto-descripcion{
font-size: 18px;
}
.producto-precio{
font-size: 20px;
font-weight: bold;
margin-top:10px;
}
footer{
text-align: center;
background: url(imagenes/bg.jpg);
padding:40px;
}
Hola,
En principio no deberías utilizar un identificador llamado body, ya que body es una etiqueta de HTML. La aplicación de la fuente debe funcionar sin usar el id en body.
Por otra parte, prueba mover esta linea arriba de ya que el reset limpia todos los estilos generados en style.css. Eso podría estar generando el problema que no se aplique la fuente.
Saludos,
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">Hola. Subí la línea reset antes de style según lo entendí, y me ha funcionado. Muchas gracias.
Saludos