Custom fonts look great but come with a nasty performance tradeoff. By default, most browsers hide text entirely (FOIT — Flash of Invisible Text) until the custom font downloads. Your headline, your value proposition, your CTA copy — all invisible while a 50-100KB font file downloads. On slow connections, that's 2-4 seconds of your landing page showing blank text areas.
The alternative, FOUT (Flash of Unstyled Text), shows text immediately in a system font, then swaps to the custom font once loaded. This causes a visual flicker and potentially a layout shift if the fonts have different metrics. Neither option is great, which is why you need a deliberate strategy.
The practical approach
For most landing pages, use font-display: swap combined with font subsetting and preloading. Subset your fonts to only the characters you actually use (tools like glyphhanger do this automatically), preload the font file with <link rel="preload">, and use size-adjust on your fallback font to match the custom font's metrics — this minimizes CLS during the swap.
If you want to be aggressive: use font-display: optional. This shows the custom font only if it's already cached, otherwise uses the system font. Returning visitors get your custom font; first-time visitors get instant text rendering with zero layout shift. Your headline being readable instantly matters more than it being in the perfect typeface.