1
resposta

Problema com importação da fonte

Eu tinha conseguido importar a fonte certinho, quando foi para transformar em variáveis, não consegui usar a fonte do projeto como variável.

Arquivo estilosGlobais.scss:

@import-normalize;
@import "./variaveis.scss";

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-image: linear-gradient($azul-escuro, $azul-claro);
    box-sizing: border-box;
}

body::-webkit-scrollbar {
    width: 3px;
  }
  body::-webkit-scrollbar-track {
    background: linear-gradient($azul-escuro, $azul-claro);
  }
  body::-webkit-scrollbar-thumb {
    background-color: $azul-claro;
    border-radius: 20px;
  }
  body::-webkit-scrollbar:hover{
    width: 20px;
  }

  @font-face {
    font-family: "GhandhiSans-Regular";
    src: local("GhandhiSans-Regular"), url("../assets/fontes/GandhiSans-Regular.otf") format("truetype");
    font-weight: 500;
    font-display: swap;
  }

  @font-face {
    font-family: "GhandhiSans-Bold";
    src: local("GhandhiSans-Bold"), url("../assets/fontes/GandhiSans-Bold.otf") format("truetype");
    font-weight: 700;
    font-display: swap;
  }

Arquivo _variaveis.scss:

$fonte-normal: "GandhiSans-Regular";
$fonte-bold: "GandhiSans-Bold";
$cor-do-texto: #d9d9d9;
$azul-escuro: #041833;
$azul-claro: #154580;
$azul-rodape: #04244f;
$rosa: #c98cf1;
$roxo: #7b78e5;
$cinza-claro: #9d9d9d;
$tag-color: rgba(148, 163, 184,0.3);
1 resposta

Oi, Anna! Tudo bem?

Vi que você importou no arquivo de estilosGlobais como

font-family: "GhandhiSans-Regular";

diferente do que eu fiz em aula que foi

font-family: "GandhiSansRegular";

Ao importar o arquivo de fontes eu renomeei a fonte. É provável que durante a compilação dor arquivos css, principalmente o de variáveis css, o compilador confunda o nome dos arquivos.

Então tente alterar o nome, do jeito que fiz em vídeo e veja se isso resolve seu problema.

Abraços!