Using Font Face In CSS

What Is @font-face in CSS?

Typography defines how your content feels. While system fonts like Arial or Times New Roman have served the web for decades, modern websites demand visual distinction. The @font-face CSS at-rule unlocks that creative potential by letting you embed custom fonts directly into your projects, transforming generic layouts into memorable brand experiences.

The @font-face at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer. This powerful CSS feature has been part of the specification since CSS2 and gained universal browser support by 2015, making it a reliable tool for modern web development.

Before @font-face, web designers were limited to a small set of "web-safe" fonts. This constraint led to visually homogeneous websites. The @font-face rule changed everything by allowing developers to define and use fonts that are not installed on the user's system, opening unlimited typographic possibilities.

Essential @font-face Descriptors

Understanding the various descriptors within @font-face gives you fine-grained control over how fonts load and render. Each descriptor serves a specific purpose, and mastering them is key to professional typography implementation.

font-family

The font-family descriptor specifies a name that will be used as the font face value for font properties. A font-family name is required for the @font-face rule to be valid. This name acts as an identifier that you reference throughout your CSS when applying the font to elements.

src

The src descriptor specifies references to font resources including hints about the font format and technology. A src is required for the @font-face rule to be valid. You can combine local() references to system fonts with url() references to hosted font files.

font-weight and font-style

These descriptors define the weight and style characteristics of the font file being loaded. The font-weight accepts values from 100 to 900, with normal mapping to 400 and bold to 700. The font-style accepts normal, italic, or oblique values.

font-display

The font-display descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use. This property significantly impacts perceived performance and user experience. The swap value is commonly recommended because it shows fallback text immediately and swaps to the custom font once loaded.

Font Formats and Browser Compatibility

Modern web development primarily relies on two font formats that provide excellent compression and universal browser support.

WOFF2 Format

Web Open Font Format 2 (WOFF2) is the modern, highly compressed format designed specifically for the web. It offers the best compression, typically 30% smaller than WOFF, resulting in faster page loads. All major browsers support WOFF2, making it the preferred format.

WOFF Format

Web Open Font Format (WOFF) serves as an older compressed format that provides good browser support as a fallback for browsers that do not support WOFF2.

Deprecated Formats

TrueType (TTF) and OpenType (OTF) are traditional desktop font formats with larger file sizes. EOT was used exclusively for Internet Explorer and is no longer relevant. SVG fonts were for older iOS devices and are deprecated.

Modern projects should focus on WOFF2 as the primary format with WOFF as a fallback.

Performance Optimization for Custom Fonts

Custom fonts add visual appeal but can impact page performance if not properly optimized. Implementing best practices ensures your typography enhances rather than hinders the user experience. Slow-loading fonts affect Core Web Vitals metrics like Largest Contentful Paint (LCP), which is a factor in search rankings.

Preloading Critical Fonts

For fonts that appear above the fold or are essential to initial page render, use the preload link relation to prioritize their loading.

Subsetting Fonts

Many fonts include character sets for multiple languages that your website may not need. Subsetting reduces file sizes by including only the characters your content actually uses.

Font Loading Strategies

The font-display descriptor combined with proper CSS fallback stacks creates robust font loading behavior. Always define fallback fonts that closely match your custom font's characteristics to minimize visual shifts when fonts swap.

Variable Fonts: The Modern Approach

Variable fonts represent a significant advancement in web typography, allowing multiple variations of a typeface to be contained in a single font file. This technology dramatically reduces the number of font files needed while providing unprecedented design flexibility.

Instead of loading separate font files for each weight and style, a variable font contains all variations in a single optimized file. You define a range of acceptable values, and the browser renders the appropriate variation based on your CSS declarations.

The weight axis (wght) allows any value between the minimum and maximum, enabling smooth gradations from thin to extra bold. The slant axis (slnt) provides control over italic angles without requiring separate font files. For fonts that support them, axes like width (wdth), optical size (opsz), and custom axes offer even more typographic control.

Advanced Descriptors for Fine Control

Beyond the basic descriptors, @font-face provides several advanced options for optimizing font rendering and behavior.

Ascent and Descent Overrides

The ascent-override and descent-override descriptors adjust how fonts align with the baseline, which is particularly useful when fonts from different foundries have inconsistent vertical metrics.

Size Adjust

The size-adjust descriptor defines a multiplier for glyph outlines and metrics, making it easier to harmonize the designs of various fonts when rendered at the same font size.

Font Feature Settings

For fonts with OpenType features, font-feature-settings provides access to advanced typographic capabilities like ligatures, small caps, old-style figures, and discretionary ligatures.

Common Mistakes and Debugging

Even experienced developers encounter issues with custom fonts. Understanding common pitfalls helps you avoid them and troubleshoot effectively.

Cross-Origin Restrictions

Web fonts are subject to the same domain restriction unless HTTP access controls (CORS) are used. When hosting fonts on a CDN, ensure proper CORS headers are configured.

Mismatched Font Weights

A frequent issue occurs when you define a font with one weight in @font-face but apply a different weight in your CSS. The browser will synthetically bold or fail to render the intended style.

Forgetting Font Styles

Similar to weight mismatches, forgetting to define italic variants means browsers must artificially slant fonts, which looks unprofessional.

Ignoring Layout Shift

Fonts that load after initial render can cause content to reflow as fallback fonts are replaced. Mitigate this by using appropriate font-display values and sizing fallback fonts to match.

Best Practices for Production

Implementing custom fonts in production requires attention to caching, delivery, and fallback strategies that ensure consistent, performant experiences. Optimized typography is a key component of professional web development services that deliver both aesthetic appeal and technical excellence.

Host fonts on a CDN for global distribution with low latency. Configure proper cache headers while implementing cache-busting through filename versioning when fonts update.

Test across different browsers, devices, and network conditions. Use browser DevTools to monitor font loading behavior and identify issues with loading order or fallback behavior.

Organize your @font-face declarations in a dedicated CSS file loaded before any styles that use the fonts. This ensures fonts are defined before they are referenced.

Sources

1. MDN Web Docs - @font-face - Official web standard reference
2. CSS-Tricks - @font-face Almanac - Comprehensive descriptor reference
3. Penpot Blog - Custom Fonts Guide - Best practices for performance