Can You Import Multiple Font Weights with a Single @font-face Query?

Importing Multiple Font Weights with a Single @font-face Query

In CSS, the @font-face rule is used to import custom fonts into a webpage. However, importing fonts with multiple weights can require multiple queries. This article explores the possibility of importing multiple font weights with a single query.

Problem

Consider the Klavika font, which comes in 8 different 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

The goal is to import these fonts into CSS with a single @font-face query, defining the weight in the query itself.

Solution

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

To achieve this, a special flavor of @font-face can be used:

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

This approach associates different styles and weights with different fonts using the same font family name.

Usage

Now, you can specify font-weight or font-style for any element without specifying the font family or overriding existing settings:

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

Conclusion

Using this technique, it is possible to import multiple font weights with a single @font-face query in CSS, simplifying the process and improving code efficiency.

The above is the detailed content of Can You Import Multiple Font Weights with a Single @font-face Query?. For more information, please follow other related articles on the PHP Chinese website!