Fallback Font Selector

Ever notice that annoying flash of a different font as your custom fonts load? That quick moment where your text jumps around as it switches from the default font to your chosen Google Font? That’s called FOUC (Flash of Unstyled Content), and it’s not just visually jarring, it can hurt your Core Web Vitals (CWV) scores, specifically Cumulative Layout Shift (CLS).

If you’re going to use a Google font or custom font, choosing the right fallback font that closely matches your font’s size and spacing will make a big difference! When they’re similar, visitors barely notice the transition, and your CLS scores stay happy.

How to use the fallback selector tool:

  1. Pick your web font
    from the Google Fonts dropdown, or upload a custom font.
  1. Choose a fallback font
    from common system fonts that come on all devices, like Arial, Georgia, etc.
  1. Check the overlapped preview
    to see how closely they match, test with more fallback fonts
  1. Copy the “font family stack”
    and use it in your CSS

The overlapped view shows both fonts at once—the closer they align, the less layout shift you’ll get. Look for minimal text reflow when switching between the previews, and you’ve found your match!