Write bulletproof @font-face declarations, configure font-display, specify format fallbacks, and prevent layout shifts.
The Modern @font-face Syntax
```css
@font-face {
font-family: 'CustomFont';
src: url('https://example.com/fonts/custom-font.woff2') format('woff2'),
url('https://example.com/fonts/custom-font.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: 'CustomFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
```
The Importance of font-display: swap
Setting `font-display: swap` ensures the browser renders fallback system text immediately while the custom font is downloaded in the background, eliminating the Flash of Invisible Text (FOIT).