Codectionary / Developer documentation / CSS

Custom Fonts with @font-face

@font-face names a font resource that can be used by font-family. A font-display strategy controls the rendering period while a web font loads. Match declared weight and style to the supplied font file; cross-origin font downloads also require appropriate server CORS headers.

Syntax

@font-face { font-family: "Body"; src: url("body.woff2") format("woff2"); font-display: swap; }

Examples

Custom Fonts with @font-face: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

@font-face {
  font-family: "ExampleLocal";
  src: local("Georgia");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
p { font-family: "ExampleLocal", serif; font-size: 1.25rem; }
  1. Expected result: The paragraph uses locally installed Georgia when available, with a serif fallback if it is absent.
  2. The example is offline and does not require a font download.
  3. For deployment, replace local() with a licensed WOFF2 resource and retain a fallback family.
HTML used by this example

<h1>Readable typography</h1>
<p>This paragraph uses a local face when available and otherwise falls back to serif.</p>

Best practices

  • Supply only required weights and subsets to control download size.
  • Use fallback metrics and loading strategies that limit layout movement.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading