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;
}
Best Answer
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:
You can now specify
font-weight:bold
orfont-style:italic
to any element you like without having to specify the font-family or overridingfont-weight
andfont-style
.For a full overview of this feature and the standard use take a look at this article.
EXAMPLE PEN