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

In scenarios where a font family comprises multiple variations of weight and style, importing each variation individually using separate @font-face queries can become tedious. This article explores the possibility of consolidating these queries into a single declaration.

The Challenge: Importing Multiple Font Weights

Consider a scenario where the Klavika font is available in various weights 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 task is to import these variations into CSS using a single @font-face query that defines the weight parameter. This eliminates the need for copying and pasting the query multiple times.

The Solution: Utilizing Extended @font-face Syntax

Fortunately, @font-face offers an extended syntax that enables the assignment of different weight and style values to a single font family:

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

In this example:

• font-family: 'Klavika' defines the font family name.
• src: url(..), followed by the corresponding weight, specifies the source files for the regular and bold variations.

Benefits of Consolidated Font Queries

Consolidating font queries provides several benefits:

• Reduced code duplication: Avoids repetitive @font-face queries for each weight variation.
• Improved readability: Keeps the CSS code organized and concise.
• Easier maintenance: Changes to font weights can be made in a single location.

Additional Resources

For a comprehensive overview of this feature and its standard usage, refer to the following article: [Extended @font-face syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face.

Example Pen

See a live demonstration of this technique in the following example pen: [Multiple Font Weights with a Single @font-face Query](https://codepen.io/anon/pen/abvaqP).