Optimización de declaraciones de fuentes: importación de múltiples pesos de fuentes con una única consulta @font-face

En escenarios donde una familia de fuentes comprende múltiples variaciones de peso y estilo, importar cada variación individualmente usando consultas @font-face separadas puede resultar tedioso. Este artículo explora la posibilidad de consolidar estas consultas en una sola declaración.

El desafío: importar varios pesos de fuente

Considere un escenario donde la fuente Klavika está disponible en varios pesos y tamaños:

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

La tarea consiste en importar estas variaciones a CSS utilizando una única consulta @font-face que define el parámetro de peso. Esto elimina la necesidad de copiar y pegar la consulta varias veces.

La solución: utilizar la sintaxis @font-face extendida

Afortunadamente, @font-face ofrece una sintaxis que permite la asignación de diferentes valores de peso y estilo a una sola familia de fuentes:

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

En este ejemplo:

• font-family: 'Klavika' define el nombre de la familia de fuentes.
• src: url(..), seguido del peso correspondiente, especifica los archivos fuente para las variaciones regulares y en negrita.

Beneficios de la fuente consolidada Consultas

La consolidación de consultas de fuentes proporciona varios beneficios:

• Duplicación de código reducida: Evita consultas @font-face repetitivas para cada variación de peso.
• Legibilidad mejorada: Mantiene el código CSS organizado y conciso.
• Mantenimiento más fácil: Los cambios en el peso de las fuentes se pueden realizar en una sola ubicación.

Recursos adicionales

Para obtener una descripción general completa de esta función y su uso estándar, consulte el siguiente artículo: [Extended @font-face sintaxis](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face.

Ejemplo de lápiz

Ver una demostración en vivo de esta técnica en el siguiente lápiz de ejemplo: [Múltiples pesos de fuente con una única consulta @font-face](https://codepen.io/anon/pen/abvaqP).