Web Fonts and @font-face

Web fonts let a site load a chosen font face rather than relying solely on fonts already installed on a device.

The @font-face rule gives a downloadable font file a family name, a source URL and optional supported weights. After declaring it, you use that family through ordinary font-family declarations. WOFF2 is a common compressed format for web delivery.

For example:

@font-face {
  font-family: "SiteSans";
  src: url("/fonts/site-sans-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
body { font-family: "SiteSans", Arial, sans-serif; }

The URL above is an illustrative local asset path; host a properly licensed font there before expecting it to load. The rendered demonstrations below use installed fallbacks and need no network requests.

@font-face registers a named face; font-family selects it when available and otherwise falls back to the next family.

Choose a readable typeface that can render without downloading a file.

HTML

<div class="font-preview"><h3>Today’s summary</h3><p>This stays legible even when the preferred typeface is missing.</p></div>

CSS

.font-preview { font-family: "SiteSans", Arial, sans-serif; padding: 16px; background: #eff6ff; border-radius: 9px; }
.font-preview h3 { margin: 0 0 8px; }
.font-preview p { margin: 0; }

Rendered output

Observe: The browser displays the text using a listed available fallback because this preview does not ship SiteSans.

Use serif heading typography while keeping supporting copy sans-serif.

HTML

<div class="font-preview"><h3>Today’s summary</h3><p>This stays legible even when the preferred typeface is missing.</p></div>

CSS

.font-preview { padding: 16px; background: #eff6ff; border-radius: 9px; font-family: Arial, sans-serif; }
.font-preview h3 { font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; margin: 0 0 8px; color: #1e40af; }
.font-preview p { margin: 0; }

Rendered output

Observe: The heading has a serif character while the paragraph keeps a practical sans-serif style.

@font-face registers a named face; font-family selects it when available and otherwise falls back to the next family.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• A missing font URL does not guarantee your requested font will render; provide fallback families.
• Keep font files optimized and check their licenses before distributing them.

Place a licensed WOFF2 font at a real URL, add an @font-face rule, and test slow-network font loading and fallback behavior.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Choose web fonts deliberately, declare fallbacks and keep the page usable while fonts load.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.