Multiple font-weights, one #font-face query - css

Question

I have to import the Klavika font and I've received it in multiple shapes and sizes:
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
Now I would like to know if it's possible to import those into CSS with just one #font-face-query, where I'm defining the weight in the query. I want to avoid copy/pasting the query 8 times.
So something like:
#font-face {
font-family: 'Klavika';
src: url(../fonts/Klavika-Regular.otf), weight:normal;
src: url(../fonts/Klavika-Bold.otf), weight:bold;
}

Answer 1

Actually there is a special flavor of #font-face that will permit just what you're asking.
Here's an example using the same font-family name with different styles and weights associated with different fonts:
#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;
}
You can now specify font-weight:bold or font-style:italic to any element you like without having to specify the font-family or overriding font-weight and font-style.
body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}
For a full overview of this feature and the standard use take a look at this article.
EXAMPLE PEN

Answer 2

#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;
}

Answer 3

Update 2022: use variable fonts
Provided your font is available as a variable font you can actually combine multiple font-weights in a single #font-face rule like so:
#font-face {
font-family: 'Roboto Flex';
font-style: normal;
font-weight: 100 1000;
font-stretch: 0% 200%;
src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf9-EmFw.woff2) format('woff2');
}
We need to specify a font-weight range by adding 2 values:
font-weight: 100 1000;
slider_weight.addEventListener("input", function () {
var axisValue = slider_weight.value;
testarea.style.fontWeight = axisValue;
value_weight.innerText = axisValue;
});
slider_width.addEventListener("input", function () {
var axisValue2 = slider_width.value;
testarea.style.fontStretch = axisValue2+'%';
value_width.innerText = axisValue2;
});
body{
font-family: 'Roboto Flex';
font-size:5vw
}
#font-face {
font-family: 'Roboto Flex';
font-style: normal;
font-weight: 100 1000;
font-stretch: 0% 200%;
src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf9-EmFw.woff2) format('woff2');
}
#testarea {
font-size: 2em;
transition:0.5s;
font-weight:100;
font-stretch: 0%;
}
.regular{
font-weight:400
}
.bold{
font-weight:900
}
.condensed{
font-stretch:0%;
}
<h1 class="bold">Roboto Flex bold</h1>
<h1 class="regular condensed">Roboto Flex regular condensed</h1>
<label for="slider_weight">Weight</label>
<input type="range" id="slider_weight" name="slider" value="100" min="100" max="1000" step="10">
<span id="value_weight">100</span>
<br>
<label for="slider_width">Width</label>
<input type="range" id="slider_width" name="slider" value="0" min="0" max="200" step="1">
<span id="value_width">0</span>
<p id="testarea" contenteditable="true">Type something ...</p>
Retrieving google variable fonts ... tricky
I highly recommend this post, since the current google fonts UI isn't particularly helpful:
How To Get The Variable Font Links From Google Fonts?
Keep in mind the #font-face won't automatically apply font weights to emphasized elements like <strong> or <h1><h2><h3> etc.
So make sure, you specify the desired font weights for a predictable rendering like so:
/* Variable fonts: we can apply intermediate weight values - yay! */
strong{
font-weight: 623
}
Don't rely on keyword-based weights or styles (e.g semi-bold, medium, semi-condensed etc.)
For instance: what is the difference between "medium" and "semibold"?
... It depends on the font design, your font's weight range and actually on your design decision.
Some fonts are by default rather "bold" others rather "thin" or "light" (related post: Some Google font doesn't have Semibold font type)
/* Roboto 400 is too bold for me – map default/regular weight 400 to 300 */
body{
font-family: "Roboto Flex";
font-weight: 300;
}
/* Roboto 700 is not bold enough for me – map default/bold weight 700 to 1000*/
strong{
font-weight: 1000
}
/* ... OK a medium weight might be handy – lets say 625 */
.medium{
font-weight: 625
}
/* condensed or expanded styles: font-stretch < 100 = condensed;
font-stretch > 100 = expanded; */
.condensed{
font-stretch:0%;
}
.semi-condensed{
font-stretch:50%;
}
.semi-expanded{
font-stretch:200%;
}
.expanded{
font-stretch:200%;
}

Answer 4

If like me you need to load Roboto fonts without hitting Google's servers it should look like:
/* Thin */
#font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Thin.ttf) format('truetype');
font-style: normal;
font-weight: 100;
}
/* Light */
#font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Light.ttf) format('truetype');
font-style: normal;
font-weight: 300;
}
/* Normal */
#font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Regular.ttf) format('truetype');
font-style: normal;
font-weight: 400;
}
/* Medium */
#font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Medium.ttf) format('truetype');
font-style: normal;
font-weight: 500;
}
/* Bold */
#font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Bold.ttf) format('truetype');
font-style: normal;
font-weight: 700;
}
/* Black */
#font-face {
font-family: 'Roboto';
src: url(../fonts/Roboto-Black.ttf) format('truetype');
font-style: normal;
font-weight: 900;
}
Then do the same for the italic variants if needed.
See font-weight documentation for clues on mapping names to numerical weight. Here is Roboto font downlond link.

Answer 5

Use Tranfonter, saved me a ton of time: https://transfonter.org/