So Site Doesn't " Jump "

When you connect a cool font via Google Fonts or @font-face, it doesn't download immediately.

1. font-display: swap

This is the most important property. It tells browser: " While my beautiful font downloads, show regular system font, then replace it " . Without it, user might see empty screen for 2-3 seconds (FOIT — Flash of Invisible Text).

2. WOFF2 Format

Always use it. It's 30-50% smaller by weight than old TTF.

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brand.woff2') format('woff2');
  font-display: swap; /* Critical for speed! */
}