Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Fonte pacífico não funciona

(não consegui anexar a imagem, mas a fonte em sobre__titulo e sobre__descricao não estão indo com a fonte pacifico, está em outra diferente)

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <link href="https://fonts.googleapis.com/css?family=Pacifico|Roboto:100,300,400,500,700,900" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Fruta & Fruto</title>
    <link rel="stylesheet" href="./assets/css/normalize.css" />
    <link rel="stylesheet" href="./assets/css/reset.css" />
    <link rel="stylesheet" href="./assets/css/cabecalho.css" />
    <link rel="stylesheet" href="./assets/css/menu/menu__link.css" />
    <link rel="stylesheet" href="./assets/css/menu/menu__item.css" />
    <link rel="stylesheet" href="./assets/css/menu/menu__lista.css" />
    <link rel="stylesheet" href="./assets/css/banner/banner.css" />
    <link rel="stylesheet" href="./assets/css/banner/banner__imagem.css" />
    <link rel="stylesheet" href="./assets/css/banner/banner__titulo.css" />
    <link rel="stylesheet" href="./assets/css/sobre/sobre.css" />
    <link rel="stylesheet" href="./assets/css/sobre/sobre__descricao.css" />
    <link rel="stylesheet" href="./assets/css/sobre/sobre__titulo.css" />

</head>

<body>
    <header class="cabecalho">
        <img class="logo" alt="Logo Fruta e Fruto" src="/assets/img/logo.jpg" />
        <nav class="menu">
            <ul class="menu__lista">
                <li class="menu__item"><a class="menu__link ativo" href="#">Início</a></li>
                <li class="menu__item"><a class="menu__link" href=" # ">Receitas</a></li>
                <li class="menu__item"><a class="menu__link" href="#">Quem somos</a></li>
                <li class="menu__item"><a class="menu__link" href=" # ">Comunidade</a></li>

            </ul>
        </nav>
    </header>
    <section class="banner">
        <img class="banner__imagem" src="./assets/img/banner.jpg" />
        <h2 class="banner__titulo">Reaproveite melhor os alimentos!</h2>
    </section>
    <section class="sobre">
        <h2 class="sobre__titulo">Receitas para economizar e ganhar saúde</h2>
        <p class="sobre__descricao">Nossas receitas ajudam você a aproveitar melhor os alimentos, economizar, ganhar tempo e praticidade</p>
    </section>

</body>

</html>

No CSS está assim:

.banner__titulo {
    Color: #fdfdfd;
    font-family: Pacifico, cursive;
    font-size: 5.0625rem;
    position: absolute;
    left: 50%;
    text-shadow: 0 4px 4px rgba(0, 0, 0.75);
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    /*cada 50% é referente ao eixo x e y */
    width: 100%;
}
2 respostas

Você só está aplicando o font-family na classe ".banner__titulo", que no caso é o seu <h2>. Caso você queira aplicar essa fonte pra todos os textos no seu html é só aplicar o font-family no seletor *{font-family: Pacifico, cursive;} ou pode aplicar no body tbm body{font-family: Pacifico, cursive;}, caso queira aplicar somente em alguns textos, você vai ter que aplicar em cada seletor específico. Ex: .banner__titulo, .sobre__titulo, .sobre__descricao{font-family: Pacifico, cursive;}

solução!

Eu preciso que dela aplicada apenas no ".banner__titulo", mas a fonte "Pacifico" não vai, o site coloca o que parece ser a fonte "Comic Sans" no lugar.

Edit: não sei o que fiz mas consegui hehe.

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