Entrar Ainda não tem acesso?

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

[Dúvida] 3º Font-face a incluir?

Referente ao curso HTML e CSS: ambiente, estrutura e estilo, no capítulo Estilizando e adaptando layouts com CSS e atividade Usando arquivos de fontes

por Esperidião Ribbeiro Vaz Curvo
| 6.2k xp | 9 posts

Eu notei que há um terceiro tipo de fonte no exercício da Tecboard

Poppins SemiBold

Por eu isso eu gostaria de saber se fiz o passo certo de repetir o processo para o Poppins SemiBold ou se teria outra forma trazer o semibold para o projeto? 

/*Definição de fontes*/
@font-face {
    font-family: "Unbounded";
    src: url("../fonts/Unbounded-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;  
}
@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
    font-weight: 600; /* Inclusão da fonte Poppins-SemiBold no font-face */
    font-style: normal;
    font-display: swap;

Essa seria a forma correta de inserir as 3 fontes pelo @font-face?

1 resposta
por Mike de Sousa
| 4736.7k xp | 9739 posts
Alura Scuba Team Analista de Suporte Educacional

Olá, Esperidião, como vai?

Sim, essa abordagem está correta. Quando uma mesma família de fontes possui variações de peso, como Regular, SemiBold e Bold, o recomendado é criar um bloco @font-face para cada arquivo, mantendo o mesmo valor em font-family e alterando apenas o font-weight para representar cada variação. Dessa forma, o navegador consegue selecionar automaticamente o arquivo correspondente quando você utilizar um determinado peso no CSS.

No seu exemplo, definir o Poppins-Regular.ttf com font-weight: 400 e o Poppins-SemiBold.ttf com font-weight: 600 segue exatamente essa lógica. Depois, basta utilizar font-family: "Poppins"; e alterar o font-weight conforme a necessidade. Por exemplo, um título pode utilizar font-weight: 600, enquanto um parágrafo pode utilizar font-weight: 400, sem que seja necessário criar famílias diferentes, como "Poppins SemiBold".

Essa organização também facilita a manutenção do projeto, pois todas as variações permanecem agrupadas na mesma família tipográfica, seguindo uma prática bastante utilizada no desenvolvimento web.

Você chegou a testar o resultado alterando apenas o font-weight dos elementos para confirmar que o navegador está carregando a versão SemiBold corretamente?

Conte com o fórum sempre que surgir uma nova dúvida. Estamos à disposição para ajudar.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA