Meerdere lettergewichten, één @font-face-query

Ik moet het Klavika-lettertype importeren en ik heb het in meerdere vormen en maten ontvangen:

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

Nu zou ik graag willen weten of het mogelijk is om die in CSS te importeren met slechts één @font-face-query, waarbij ik het weightdefinieer in de vraag. Ik wil voorkomen dat ik de zoekopdracht 8 keer kopieer/plak.

Dus zoiets als:

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

Antwoord 1, autoriteit 100%

Eigenlijk is er een speciale smaak van @font-face die precies toelaat wat je vraagt.

Hier is een voorbeeld waarin dezelfde lettertypefamilienaam wordt gebruikt met verschillende stijlen en gewichten die aan verschillende lettertypen zijn gekoppeld:

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

Je kunt nu font-weight:boldof font-style:italicspecificeren voor elk element dat je wilt zonder de font-familie op te geven of font-weighten font-style.

body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
  font-weight:bold;
  font-style:italic;
}

Voor een volledig overzicht van deze functie en het standaardgebruik ga je naar dit artikel.

VOORBEELD PEN

Antwoord 2, autoriteit 3%

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