Web Font

A web font is a font file that is loaded by a browser over HTTP/HTTPS and used to render text on a webpage. Before web fonts became practical around 2009 (with the CSS @font-face rule and the launch of Google Fonts), web designers were limited to a small set of "web-safe" fonts pre-installed on operating systems — Arial, Georgia, Times New Roman, Verdana, and a handful of others. Web fonts broke this constraint, making the full breadth of typographic design available to the web.

Web fonts are served in several file formats. WOFF2 (Web Open Font Format 2) is the current standard — it provides better compression than its predecessor WOFF, resulting in faster load times. Modern browsers universally support WOFF2. For maximum compatibility with older browsers, WOFF serves as a fallback. Formats like TTF, OTF, EOT, and SVG fonts are largely historical artifacts.

/* Self-hosted web font using @font-face */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/customfont.woff2') format('woff2'),
       url('/fonts/customfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Critical for performance */
}

/* Google Fonts (external CDN) */
/* HTML: <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> */

/* Then use normally */
body {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Performance-critical: preload the most important font */
/* HTML: <link rel="preload" href="/fonts/customfont.woff2" as="font" type="font/woff2" crossorigin> */

/* font-display controls the loading behavior */
@font-face {
  font-family: 'BodyFont';
  src: url('/fonts/bodyfont.woff2') format('woff2');
  font-display: swap;    /* Show fallback immediately, swap when font loads */
  /* Alternatives: auto, block, fallback, optional */
}

Performance is the central concern with web fonts. Each font weight and style is a separate HTTP request and file download. A design using four weights of a typeface can easily add 200–400KB of font data to a page load. Best practices include: loading only the weights actually used, using font-display: swap to prevent invisible text during load, preloading critical fonts with <link rel="preload">, and considering self-hosting for fonts that are used on every page (avoiding third-party DNS resolution).

Google Fonts is the largest web font service, serving fonts free of charge with liberal licensing. Their infrastructure is heavily optimized — fonts are served from Google's CDN, compressed in WOFF2, and cached aggressively. For most projects, Google Fonts provides the best balance of quality, performance, and ease of implementation.