Applying Multiple @font-face Rules in CSS: Techniques and Best Practices

Fundamental Concepts of @font-face Rules

In CSS, the @font-face rule allows developers to define custom fonts that are sourced from font files on a server, rather than pre-installed fonts on the user's device. Each @font-face rule defines a font family by specifying a name with the font-family property and referencing font files via the src property. For instance, in the Q&A data, the user defines a font named 'GestaReFogular':

@font-face {
    font-family: 'GestaReFogular';
    src: url('gestareg-webfont.eot');
    src: local('☺'),
        url('gestareg-webfont.woff') format('woff'),
        url('gestareg-webfont.ttf') format('truetype'),
        url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}

In this code, the src property uses multiple URLs to handle compatibility across different browsers. For example, the .eot file targets older versions of Internet Explorer, while .woff, .ttf, and .svg formats cover modern browsers. The local font fallback, such as local('☺'), helps avoid redundant downloads if the font is already installed.

Application of Multiple @font-face Rules

Multiple @font-face rules can be defined in a single CSS stylesheet, each corresponding to a distinct font family. Answer 1 illustrates how to define two fonts: 'Bumble Bee' and 'GestaReFogular'. The code example is as follows:

@font-face {
    font-family: 'Bumble Bee';
    src: url('bumblebee-webfont.eot');
    src: local('☺'),
         url('bumblebee-webfont.woff') format('woff'),
         url('bumblebee-webfont.ttf') format('truetype'),
         url('bumblebee-webfont.svg#webfontg8dbVmxj') format('svg');
}

@font-face {
    font-family: 'GestaReFogular';
    src: url('gestareg-webfont.eot');
    src: local('☺'),
         url('gestareg-webfont.woff') format('woff'),
         url('gestareg-webfont.ttf') format('truetype'),
         url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}

After definition, these fonts can be referenced in CSS selectors using the font-family property. For example, setting the 'GestaRegular' font for the body element and the 'Bumble Bee' font for h1 elements:

body {
    background: #fff url(../images/body-bg-corporate.gif) repeat-x;
    padding-bottom: 10px;
    font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}

h1 {
    font-family: "Bumble Bee", "Times New Roman", Georgia, Serif;
}

This approach allows different elements to use different custom fonts, enhancing flexibility in web design. Note that @font-face rules should be placed at the top of the stylesheet to ensure fonts are defined before they are referenced.

Fine Control Over Font Weights and Styles

The reference article emphasizes using "guard" properties of the @font-face rule, such as font-weight and font-style, to manage different variants of the same font family. For instance, for the Roboto font, multiple @font-face rules can be defined, each corresponding to a specific weight or style:

@font-face {
    font-family: 'Roboto';
    src: url(fonts/Roboto-Regular.woff) format('woff');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto';
    src: url(fonts/Roboto-SemiBold.woff) format('woff');
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: 'Roboto';
    src: url(fonts/Roboto-Italic.woff) format('woff');
    font-style: italic;
    font-weight: 400;
}

With this configuration, the same font family name (e.g., 'Roboto') is used, and CSS properties like font-weight: 600; automatically select the corresponding font file. This avoids defining separate font family names for each variant, simplifying code and improving maintainability. For example, setting paragraph text to semi-bold:

p {
    font-weight: 600;
}

Instead of the unrecommended verbose approach: p { font-family: 'Roboto-Semibold'; }. The example in Answer 2 further demonstrates how to define different weights for the same font family and apply them to heading elements:

@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Thin.otf);
    font-weight: 200;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Light.otf);
    font-weight: 300;
}
/* More rules... */
h3, h4, h5, h6 {
    font-family: Kaffeesatz;
    font-weight: normal;
}
h6 { font-weight: 200; }
h5 { font-weight: 300; }
/* More styles... */

Browser Compatibility and Performance Optimization

When using multiple @font-face rules, browser compatibility must be considered. Answer 1 mentions specific issues with IE9 and suggests referring to related resources for optimization. For example, using the local() function in the src property to check for locally available fonts can reduce unnecessary downloads. The choice of font file formats is also crucial: .woff and .woff2 formats generally offer good compression and compatibility, while .eot and .ttf serve as fallbacks.

For performance, avoid defining too many unused font rules to keep the CSS file size manageable. Tools like font subsetting can include only the necessary characters, reducing file size. Additionally, ensure font files are hosted on a reliable CDN to improve loading speed.

Practical Application Cases and Conclusion

Combining insights from the Q&A data and reference article, multiple @font-face rules can be used in real-world projects to create rich typography. For instance, a corporate website might use a formal font for body text and a creative font for headings. By defining multiple @font-face rules and applying them precisely with CSS selectors, consistent and appealing designs can be achieved.

In summary, the @font-face rule is a powerful CSS feature that supports multiple definitions to enhance font flexibility on the web. By properly utilizing font weight, style properties, and browser optimizations, developers can efficiently manage custom fonts and improve user experience. In practice, it is advisable to test across different browsers to ensure compatibility and optimize performance to balance design and loading times.