Web Font

Easy — everyone uses thisFrontend

ELI5 — The Vibe Check

Web Fonts are custom fonts loaded over the internet instead of using the boring default system fonts. They make your site look unique, but they come with baggage — extra downloads, layout shifts, and the dreaded invisible text while loading. Beautiful but high-maintenance.

Real Talk

Web fonts are typefaces loaded via CSS @font-face or services like Google Fonts. They enable custom typography but introduce performance considerations: additional network requests, font file sizes, rendering delays (FOIT/FOUT), and potential layout shifts. font-display and preloading help mitigate these issues.

Show Me The Code

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

When You'll Hear This

"Always use woff2 for web fonts — it's the smallest format with wide browser support" / "Self-hosting web fonts is faster than loading them from Google Fonts"

Related Terms

Critical CSS

Critical CSS is like packing only what you need for the first 5 minutes of your trip in your carry-on.

advancedFrontend

FOIT

FOIT is when your browser hides all the text until the custom font loads, like a magician making your content vanish. 'Ta-da! Your heading is...

intermediateFrontend

Font Optimization

Downloading an entire font family is like ordering the complete encyclopedia when you only need Volume F.

intermediateFrontend

FOUT

FOUT is when your page shows up in boring system fonts and then — SURPRISE — swaps to the fancy custom font a second later.

intermediateFrontend

Back to Browse Random Term