Multiple font-weights, one @font-face query

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

Here's shorter syntax for a previous solution:

@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 2

Update 2022: use variable fonts

Referring to the original question: No you can definitely not load multiple weights or style variants (e.g italics or condensed) within a single @font-face rule unless you're loading 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

Update 2024 Finally, google has overhauled its UI to get all variable font axes. However, the following explanations may still be useful – especially if you need to generate CSS queries dynamically. Besides, we still have Browser-sniffing :(

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 3

Solution for SCSS:

@mixin fontPoppins($name, $weight, $style) {
  @font-face {
    font-family: poppins;
    src: url('/assets/poppins/#{$name}.ttf') format("truetype");
    font-weight: $weight;
    font-style: $style;
  }
}

@include fontPoppins('Poppins-Thin', 100, normal);
@include fontPoppins('Poppins-ThinItalic', 100, italic);
@include fontPoppins('Poppins-ExtraLight', 200, normal);
@include fontPoppins('Poppins-ExtraLightItalic', 200, italic);
@include fontPoppins('Poppins-Light', 300, normal);
@include fontPoppins('Poppins-LightItalic', 300, italic);
@include fontPoppins('Poppins-Regular', normal, normal);
@include fontPoppins('Poppins-Italic', normal, italic);
@include fontPoppins('Poppins-Medium', 500, normal);
@include fontPoppins('Poppins-MediumItalic', 500, italic);
@include fontPoppins('Poppins-SemiBoldItalic', 600, italic);
@include fontPoppins('Poppins-Bold', bold, normal);
@include fontPoppins('Poppins-BoldItalic', bold, italic);
@include fontPoppins('Poppins-ExtraBold', 800, normal);
@include fontPoppins('Poppins-ExtraBoldItalic', 800, italic);
@include fontPoppins('Poppins-Black', 900, normal);
@include fontPoppins('Poppins-BlackItalic', 900, italic);

Where fonts expected to be in some static folder, in Angular it is assets folder.

currently I have in assets folder 18 files dowloaded from google fonts:

Poppins-Black.ttf
Poppins-BlackItalic.ttf
Poppins-Bold.ttf
Poppins-BoldItalic.ttf
Poppins-ExtraBold.ttf
Poppins-ExtraBoldItalic.ttf
Poppins-ExtraLight.ttf
Poppins-ExtraLightItalic.ttf
Poppins-Italic.ttf
Poppins-Light.ttf
Poppins-LightItalic.ttf
Poppins-Medium.ttf
Poppins-MediumItalic.ttf
Poppins-Regular.ttf
Poppins-SemiBold.ttf
Poppins-SemiBoldItalic.ttf
Poppins-Thin.ttf
Poppins-ThinItalic.ttf

What next?

Or add it to the global css file

@tailwind base;
@tailwind components;
@tailwind utilities;

body { margin: 0; }

html, body {
  height: 100%;
  font-family: poppins, sans-serif /* sans-serif is fallback */;
}

Or use it in HTML

Somewhere in html use style prop:

<p style='font-family: poppins, sans-serif; 
          font-weight: bold; 
          font-style: italic' >Some text</p>

where sans-serif it is fallback font in case of internet issues.

Or use it in Tailwind

<p style='font-family: poppins, sans-serif' 
   class='font-bold italic'>Some text</p>

Answer 4

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

Answer 5

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 6

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