Font-display: swap
Ensure your store's text loads immediately — even before custom fonts are fully downloaded.
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
⚙️ How to Set Up Font-display: swap
Step 1: Enable the feature
- Open Avada SEO Suite > Speed Up > Custom > Settings
- Find Font-display: swap and toggle it ON
Step 2: Apply changes
- 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