Multiple font-weights, one @font-face query

css fonts font-face

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

It's not 1 font...it's multiple fonts...so unfortunately, I think you'd have to just grin and bear it.

Yea sorry, it's different fonts within the same family.

Multiple webfont-files === different weights

this article might help: 456bereastreet.com/archive/201012/… actually there is an SO Answer here: stackoverflow.com/questions/10045859/… that uses that article, an alternative to what you want as what you want is not possible.

diogo

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

just as I suggested in my comment above ;-)

In my case, this only use the lowest @font-face. That would be font-weight: bold; font-style: italic; everytime I refer to font-family: 'DroidSerif';

Do you have a test that proves this method is actually working? How would you prove that the browser isn't just faking the weight or style without reading the correct font file?

@rojobuffalo makes a very valid point. The pen does nothing to verify the validity of the assertion that this will behave as expected. Specifically, I removed the bold font-face declaration from the CSS example and ran it again. The appearance was identical. Was it pulling from cache? Was the browser simply fiddling the displayed weight of the regular font?

This method is correct and is outlined in this Mozilla article: hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face. You can tell the pen is working because it's defined the 'bold' font as an italic font. If the browser were faking it, it would appear bold, but it appears italic as expected. This method also has the advantage that it would style fallback fonts correctly, because font-weight: bold (or whatever) is used alongside the font-family declaration.

Mirka Nimsová

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

Please write a little explanation about why this would solve the issue. It can be something simple as a sentence.

Same solution as the previous one. Just shorter notation :)

Where can I read about this notations? Don't see it on MDN

It doesn’t seem to work and I can’t find a resource, yet there seems to be some truth to it.

What about font weight 100, 200, etc. ?

Multiple font-weights, one @font-face query

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US