How to Improve Your Elementor Website Performance by Optimizing Font Display

What is FCP?

FCP (First Contentful Paint) is a performance metric used by Lighthouse, PageSpeed Insights, and similar tools. It measures how long it takes the browser to render the first piece of DOM content after a user lands on your page.

When you’re working with Elementor on a WordPress site, one seemingly minor setting has a surprisingly large impact on FCP: the Font Display property.

How Does Font Face Work?

@font-face is a CSS rule that controls how fonts are loaded and displayed. In Elementor, fonts can come from Google Fonts or from custom font files uploaded via Elementor → Custom Fonts.
Regardless of whether you load Google Fonts remotely or locally, or whether you use custom fonts, the browser still needs time to load them.

Elementor’s default Font Display setting is “Default”, which means the browser decides the loading strategy. Depending on the user’s browser and device, this can cause text to become render-blocked while the font is loading — one of the main reasons for poor FCP scores.

The most efficient solution for both user experience and performance is to switch Font Display to “Swap”. With the swap strategy, a fallback font is shown immediately, and once your custom font loads, it seamlessly replaces the fallback. This eliminates delays and improves FCP.

How to Change the Font Display in Elementor

Google Fonts

If you’re using Google Fonts, adjusting the setting is simple:

1. Go to Elementor → Settings → Advanced → Google Fonts Load
2. Set Google Fonts Load to “Swap”

Custom Fonts

IIf you’re using Custom Fonts, Elementor does not provide a one-click setting for modifying the Font Display strategy.

While you can attempt to override it with CSS, the most reliable method is to use Elementor’s official hook. Simply copy and paste the provided PHP snippet into your theme’s functions.php file or a plugin.

function update_font_display() {
	return 'swap';
}

add_filter( 'elementor_pro/custom_fonts/font_display', 'update_font_display' );

Here is the Elementor official ducumentation.

Regenerate CSS & Clear Cache

After updating your settings, make sure to regenerate Elementor’s CSS files:

Elementor → Tools → General

• Click Clear Files & Data
• Click Sync Library

If you’re using any caching or optimization plugins, don’t forget to clear their caches as well.