Can Multiple Font Weights Be Defined with a Single @font-face Query?

The Klavika font comes in various weights and shapes. Can these be imported into CSS with a single @font-face query that specifies the weight?

Solution:

Introducing a versatile feature of @font-face, you can associate different styles and weights with a single font family name:

@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 */
}

You can now specify font-weight:bold or font-style:italic for different elements:

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

For comprehensive details on this feature, refer to the official documentation.

Example:

[Example Pen](https://codepen.io/anon/pen/EjxVqv)