@font-face & Web Fonts

@font-face & Web Fonts — Load custom fonts with @font-face, optimize font loading, and apply proper fallback strategies. The guide walks through Font Loading. `@font-face { font-family:"Custom"; src:url("/fonts/custom.woff2") format("woff2"); font-weight:400; font-display:swap; }`. Formats: woff2 (best), woff, ttf, eot. `font-display: swap` — show fallback text immediately, swap when font loads (prevents invisible text). Variable fonts: one file for all weights. The guide is organized into 1 sections that build on each other, each pairing a prose explanation with real CSS you can use as-is. Related guides: CSS Introduction, CSS Selectors, CSS Box Model, CSS Flexbox, CSS Grid. This is one of 68 CSS guides on CSS Reference — see the full list on the guides page. Look up any property mentioned in this guide from the search page or the CSS Reference homepage.