Solucionado (ver solución)
Solucionado
(ver solución)
7
respuestas

No cambia el tipo de fuente

Buena tarde, al seguir los pasos del vídeo no logro que se realice el cambio de fuente, lo he hecho tal cual se muestra en el vídeo, he probado también con otros tipos de fuente, pero no logro ningún cambio ¿A qué se puede deber esto?

Muchas gracias

7 respuestas

Hola Duván, espero que esté bien.

Comparta con nosotros tu código, me quedo aquí a tu espera para ver cómo solucionaste el problema.

<head>
    <meta charset="UTF-8">
    <title>Barbería Alura</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="reset.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@100&display=swap" rel="stylesheet">
</head>

<body>
    <header>
        <div class="caja">
        <h1><img src="imagenes/logo.png"></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="diferenciales">
            <h3 class="titulo-principal">Diferenciales</h3>
            <ul>
                <li class="items">Atención personalizada a los clientes</li>
                <li class="items">Espacio Diferenciado</li>
                <li class="items">Localizacion</li>
                <li class="items">Profesionales calificados</li>
            </ul>

            <img src="banner/diferenciales.jpg" class="imagenDiferencial">
        </section>
    </main>
    <footer>
        <img src="imagenes/logo-blanco.png">
        <p class="copyrigth">&copy Copyright Barbería Alura - 2020</p>
    </footer>
</body>

En el CSS

body{ font-family: 'Noto Serif Display', serif; } acorto el código por limitación de caracteres, ¡muchas gracias por la ayuda!

Depende de lo que quieras cambiar, por ejemplo si quieres modificar los parrafos es modificar en el css segun la etiqueta o clase, yo realice el cambio en el parrafo asi: p{ text-align: center; font-family:Arial, Helvetica, sans-serif } Y si me funcionó, si lo que quieres es modificar todo el html en el body lo hice asi: body{ font-family:Arial, Helvetica, sans-serif } Y efectivamente cambió, de pronto son por esas comillas que tienes. Espero te sirva

Hola Nicolás, gracias por responder, de momento no logró cambiar el tiempo de fuente por una fuente externa, si quito las comillas que tengo sigue sin cambiar, ¿tú le agregaste alguna línea a tu código en el archivo .html referente al nuevo tipo de fuente(externa)?

Hola Duvan, pone captura de pantalla de tu CSS y de tu HTML, para ver el codigo. A mi lo que me pasaba es que el link que usaba no era el correcto, y tambien que en el CSS ponia la familia entera de fuentes, y tomaba cualquier cosa. Saludos.

Pues mira, yo lo deje de esta forma; si necesitas el css me avisas

<!DOCTYPE html>

<html lang="es">

    <head>

        <meta charset="UTF-8">
        <title>Barberia Alura</title>
        <link rel="stylesheet" href="style.css">

    </head>

    <body>

        <header>
            <h1 class="titulo-principal">Barberia Alura</h1>
        </header>

        <img id="banner" src="banner/banner.jpg">

        <div class="principal">

            <h2 class="titulo-centralizado">Sobre la Barbería Alura</h2>

            <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>
        </div>

        <div class="diferenciales">

            <h3>Diferenciales</h3>

            <ul>   
                <li class="items">Atencion personalizada a los clientes</li>
                <li class="items">Espacio diferenciado</li>
                <li class="items">Localización </li>
                <li class="items">Profesionales calificados</li>
            </ul>

            <img id="diferenciales" src="diferenciales/diferenciales.jpg" class="imagenDiferenciales">

        </div> 

    </body>
</html>
solución!

Creo que cambio la forma de embed, fui a google.font y me aparece el siguiente código para copiar:

<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">

Así me funcionó. Saludos