Resolvi colocar o font-family no body do arquivo EstilosGlobais.scss, para alterar tudo de uma vez:
body {
margin: 0;
padding: 0;
min-height: 100vh;
background-image: linear-gradient(#041833, #154580);
box-sizing: border-box;
font-family: "GandhiSansRegular";
}
Acontece que me deparei com uma situação estranha sobre o font-weight que não estou entendendo porque está acontecendo.
No arquivo Menu.module.scss eu comentei as linhas da fonte, porque já tinha colocado no estilos globais, mas o primeiro item da lista tem o font-weight bold, então no scss está 'font-weight: 700', até ai ok, tudo funcionando. Código:
.menu {
width: 18%;
&__lista {
padding-left: 0.5rem;
margin: 0;
height: 276px;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-around;
}
&__item {
display: flex;
justify-content: flex-start;
align-items: center;
&:first-child {
a {
font-weight: 700; // ** fica em negrito
color: #7b78e5;
// font-family: "GandhiSansRegular"; ** continua com a fonte Gandhi
}
}
}
img {
margin-right: 0.5rem;
width: 25px;
height: 25px;
cursor: pointer;
}
a {
text-decoration: none;
font-size: 1.125rem;
color: #d9d9d9;
// font-family: "GandhiSansRegular"; ** continua com a fonte Gandhi
}
}
A dúvida é no arquivo PaginaInicial.module.scss, porque se eu comentar a linha: 'font-family: "GandhiSansBold"', o texto continua na fonte Gandhi Regular, por estar no body do arquivo global, mas ao adicionar 'font-weight: 700', ela não fica em negrito como no menu. Código:
h1 {
position: absolute;
z-index: 1;
color: #d9d9d9;
font-size: 2.5rem;
font-weight: 700; // NÃO fica em negrito
// font-family: "GandhiSansBold"; ** continua com a fonte Gandhi
width: 401px;
height: 144px;
top: 75px;
left: 44px;
}
Resumindo a dúvida: porque o "font-weight: 700" funciona no Menu.module.scss e não no PaginaInicial.module.scss?