Proper Implementation of Multiple Font Files Using CSS @font-face Rule

Problem Context and Common Misconceptions

In web development, designers often provide multiple variant files for the same font family, including regular, bold, italic, and bold-italic versions. Many developers initially attempt to create separate font families for each variant, an approach that, while intuitive, leads to redundant CSS code and maintenance difficulties.

For example, consider having four variant files for the DejaVu Sans font:

DejaVuSans.ttf      // Regular
DejaVuSans-Bold.ttf // Bold
DejaVuSans-Oblique.ttf // Italic
DejaVuSans-BoldOblique.ttf // Bold Italic

The discouraged implementation defines different font families for each variant:

@font-face {
    font-family: "DejaVu Sans Regular";
    src: url("./fonts/DejaVuSans.ttf");
}

@font-face {
    font-family: "DejaVu Sans Bold";
    src: url("./fonts/DejaVuSans-Bold.ttf");
}

strong {
    font-family: "DejaVu Sans Bold";
}

This method disrupts CSS semantic features. Developers cannot use standard font-weight: bold properties and must explicitly specify font family names, contradicting CSS design principles.

Correct Implementation for Multiple Font Files

CSS @font-face rules provide descriptors like font-weight and font-style to precisely specify conditions under which each font file applies. The correct implementation is as follows:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}

Working Mechanism and Browser Behavior

When browsers encounter the above CSS definitions, they establish complete variant mappings for the "DejaVu Sans" font family:

• When elements set font-weight: normal and font-style: normal, DejaVuSans.ttf is used
• When elements set font-weight: bold and font-style: normal, DejaVuSans-Bold.ttf is used
• When elements set font-weight: normal and font-style: italic, DejaVuSans-Oblique.ttf is used
• When elements set font-weight: bold and font-style: italic, DejaVuSans-BoldOblique.ttf is used

This allows developers to use custom fonts like system fonts:

body {
    font-family: "DejaVu Sans";
    font-weight: normal;
    font-style: normal;
}

strong {
    font-weight: bold;  /* Automatically uses bold variant */
}

em {
    font-style: italic;  /* Automatically uses italic variant */
}

strong em {
    font-weight: bold;
    font-style: italic;  /* Automatically uses bold italic variant */
}

CSS Specification Evolution and Compatibility Considerations

In CSS 2 specifications, the font-style descriptor supported comma-separated value lists like font-style: italic, oblique. However, CSS3 simplified this feature to allow only single values. Developers should note this change and ensure code compliance with the latest standards.

Regarding the format() function, while specifications recommend using it to specify font formats, some browsers (like older Chrome versions) might not support this feature. In practical development, omitting format() declarations or providing multiple font format files ensures compatibility.

Extended Application Scenarios

Beyond font weights and styles, @font-face rules support other descriptors:

• font-stretch: Controls font width variants (condensed, expanded, etc.)
• unicode-range: Specifies character ranges for font application, useful for multilingual website optimization
• font-variant and font-feature-settings: Control OpenType font features

These advanced features enable developers to finely control font usage, enhancing webpage typography quality and performance.

Best Practices Summary

Based on the above analysis, best practices for using multiple font files include:

1. Using the same font-family name for all variants of the same font family
2. Using font-weight and font-style descriptors to precisely specify applicable conditions for each variant
3. Following the latest CSS specifications and avoiding deprecated features
4. Considering browser compatibility and providing multiple font formats when necessary
5. Maintaining CSS code semantics by using standard font properties instead of custom font family names

By correctly using @font-face rules, developers can fully leverage custom font potential while maintaining code simplicity and maintainability.