Font-display: swap

Ensure your store's text loads immediately — even before custom fonts are fully downloaded.

Who can use this feature? This feature is available on the Enterprise plan.

What is Font-display: swap?

When custom fonts are loading, browsers may temporarily hide your text (a problem known as Flash of Invisible Text or FOIT). The font-display: swap feature solves this by telling the browser to show fallback text instantly, and swap it out once the custom font is ready — creating a smoother, more user-friendly experience.

Why use Font-display: swap?

• Prevents invisible text while fonts load

• Improves First Contentful Paint (FCP) and Largest Contentful Paint (LCP)

• Reduces bounce rate by showing content faster

• Helps meet Core Web Vitals thresholds

🎮 Try it in action

⚙️ How to Set Up Font-display: swap

Step 1: Enable the feature

1. Open Avada SEO Suite > Speed Up > Custom > Settings

2. Find Font-display: swap and toggle it ON

Step 2: Apply changes

1. Go back to Speed Up Now, select the theme you want to optimize, and click to apply the feature

Step 3: Verify it's working

A. Check theme files

• Go to Online Store > Themes > Actions > Edit Code

• Search for avada-seo-font-display.css

• Open the file to confirm it's been added

B. Check on the storefront

• Visit your store and use PageSpeed Insights or Lighthouse

• Compare metrics before and after activation → You should see improvements in FCP and LCP

---

📌 Merchant Notes

Make sure to click Speed Up Now after enabling to apply changes to your selected theme