fontface

Font-face refers to the CSS at-rule that enables web pages to use fonts that are not installed on a user’s device. By declaring a font-family and supplying one or more font files through the src descriptor, the browser downloads the font from the server and makes it available for styling text across the page. This allows consistent typography regardless of local fonts and supports brand-specific or decorative type.

The src descriptor can reference multiple formats to maximize compatibility. A typical declaration lists WOFF2 first (preferred for its compression), then WOFF, and finally TTF or OTF, with EOT for legacy versions of Internet Explorer. A font-family name is defined and then applied to elements via the font-family property, possibly with variations for weight and style.

Licensing, performance, and accessibility are important considerations. Web fonts should be licensed for web embedding, and developers may subset fonts to include only the characters needed, reducing file size. Use caching and a sensible font-display strategy (for example swap or optional) to improve perceived load time. If fonts are served from a different origin, cross-origin resource sharing (CORS) headers may be required to permit usage.

Example:

@font-face {

font-family: 'Custom Sans';

src: url('/fonts/custom.woff2') format('woff2'),

url('/fonts/custom.woff') format('woff');

font-weight: normal;

font-style: normal;

font-display: swap;

}

Once defined, the font-family name is used in CSS like any other font.