when optimizing a website's performance in 2026, one of my go-to tricks is using font-display: swap; with system fonts to reduce load times significantly without sacrificing design quality. System Fonts: often overlooked but incredibly powerful.
Here's how I did it:
@font-face {font-family: 'CustomFont';src:url('custom-font. woff2') format("woff");}body {--fast-load-color: ; /'' green for fast ''/}/'' Use system fonts first, then custom if available ''/p,h1,h2 {font-family:'CustomFont', sans-serif;display:-webkit-font-smoothing: unset! important;}@media (prefers-reduced-motion) {p{-moz-osx-font-smoothness : auto! important; /'' OS X ''/text-rendering : optimizeLegibility! important ;}}p {font-display: swap;--fast-load-color:greenyellow;}By default, browsers will use the system fonts (which are usually cached) and only if they fail to load or render correctly do custom ones kick in. This ensures a faster first paint time while still delivering on design.
Site pages now display 1-2 seconds quicker than before with minimal impact on visual fidelity.
> Users won't notice the difference, but your server will love you for it!