Otimizando declarações de fontes: importando várias espessuras de fontes com uma única consulta @font-face

Em cenários onde uma família de fontes compreende múltiplas variações de peso e estilo, importar cada variação individualmente usando consultas @font-face separadas pode se tornar entediante. Este artigo explora a possibilidade de consolidar essas consultas em uma única declaração.

O desafio: importar vários pesos de fonte

Considere um cenário onde a fonte Klavika está disponível em vários pesos e tamanhos:

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

A tarefa é importar essas variações para CSS usando uma única consulta @font-face que define o parâmetro de peso. Isso elimina a necessidade de copiar e colar a consulta várias vezes.

A solução: utilizando sintaxe @font-face estendida

Felizmente, @font-face oferece uma extensão sintaxe que permite a atribuição de diferentes valores de peso e estilo a uma única família de fontes:

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight: normal;
  src: url(../fonts/Klavika-Bold.otf), weight: bold;
}

Neste exemplo:

• font-family: 'Klavika' define o nome da família da fonte.
• src: url(..), seguido pelo peso correspondente, especifica os arquivos de origem para as variações regulares e em negrito.

Benefícios da fonte consolidada Consultas

A consolidação de consultas de fontes oferece vários benefícios:

• Redução da duplicação de código: Evita consultas repetitivas de @font-face para cada variação de peso.
• Legibilidade aprimorada: mantém o código CSS organizado e conciso.
• Manutenção mais fácil: As alterações nas espessuras das fontes podem ser feitas em um único local.

Recursos adicionais

Para uma visão geral abrangente desse recurso e seu uso padrão, consulte o seguinte artigo: [Extended @font-face sintaxe](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face.

Exemplo de caneta

Veja um demonstração ao vivo dessa técnica no seguinte exemplo de caneta: [Múltiplas espessuras de fonte com uma única consulta @font-face](https://codepen.io/anon/pen/abvaqP).