¿Se pueden definir varios pesos de fuente con una única consulta @font-face?

La fuente Klavika viene en varios pesos y formas. ¿Se pueden importar a CSS con una única consulta @font-face que especifique el peso?

Solución:

Presentamos una característica versátil de @font-face, Puede asociar diferentes estilos y pesos con un único nombre de familia de fuentes:

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");  /* Normal weight, normal style */
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype"); /* Normal weight, italic style */
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");  /* Bold weight, normal style */
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype"); /* Bold weight, italic style */
}

Ahora puedes especificar font-weight:bold o font-style:italic para diferentes elementos:

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

Para obtener detalles completos sobre esta función, consulte la documentación oficial.

Ejemplo:

[Pluma de ejemplo](https://codepen .io/anon/pen/EjxVqv)