Dynamic Fonts in Web Development

Dynamic fonts (web fonts) let you break free from "web-safe" fonts and use custom typography. Key format: WOFF2 (Web Open Font Format 2.0) for superior compression.

Using @font-face

The CSS @font-face at-rule defines custom font families:

@font-face {
  font-family: 'MyAwesomeFont';
  src: url('/fonts/my-awesome-font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Key properties:

• font-family: Name used in CSS (e.g., p { font-family: 'MyAwesomeFont'; })
• src: Path to font file. format() hints browser about format
• font-weight / font-style: Define variants (bold, italic) with separate files
• font-display: swap: Shows fallback immediately, swaps when custom font loads. Prevents invisible text (FOIT)

Variable Fonts

Single file containing all weights and styles. Access any variation with CSS:

@font-face {
  font-family: 'MyVariableFont';
  src: url('/fonts/my-variable-font.woff2') format('woff2-variations');
  font-weight: 100 900; /* Full weight range */
  font-style: normal;
}

.heading {
  font-family: 'MyVariableFont', sans-serif;
  font-weight: 650; /* Non-standard weight—only possible with variable fonts */
}

Significantly reduces download size, provides incredible design flexibility.

Font Inspection Tool

FontDrop.info: Drag and drop font files to inspect properties, glyphs, and variable axes. Essential for debugging font issues.