# Font-display: swap

{% hint style="info" %}
**Who can use this feature?**\
This feature is available on the **Enterprise plan**.
{% endhint %}

### 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

{% embed url="<https://app.arcade.software/share/dqNUe9aycWilvWL8uEVr>" %}

### ⚙️ 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

3. 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**

***

{% hint style="info" %}

#### 📌 Merchant Notes

Make sure to **click Speed Up Now** after enabling to apply changes to your selected theme
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avada.io/seo-suite-help-center/site-speed-up/speed-up-custom-mode/font-display-swap.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.