Fix Google Pagespeed 'Ensure Text remains Visible during Webfont Load' when using Elementor Custom Font
- By
- John Doe
- Sept 17, 2024
- 7 min read
Short Intro:
This will remove the diagnostic error in Google Pagespeed 'Ensure Text remains Visible during Webfont Load' if you are using Elementor Custom Font.
Problem:
Google Pagespeed will show 'Ensure Text remains Visible during Webfont Load' in the Diagnostics result.
Solution:
If you are using Elementor Custom Fonts (recommended), you need to add the solution below to fix the Pagespeed problem.
Add this code to your theme's functions.php:
add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
return 'swap';
}, 10, 3 );
If you are using WP Rocket, add the fonts in the Preload > Preload Fonts.
If your Elementor settings have 'Google Fonts > Enabled', make sure to set 'Google Fonts Load > Swap'.
If done right, there will be a new entry in the Google Pagespeed result under 'Passed Audits' which is 'All text remains visible during webfont loads'.
Left:
HOW to Fix this Problem - Ensure Text remains Visible during Webfont Load - Page Speed Insights
by Web Squadron
https://www.youtube.com/watch?v=muRg9ZkNCPA
https://mouat.co/elementor-pagespeed-insights-ensure-text-remains-visible-during-webfont-load/
Contact details
More solutions
by ilias
You're using JetFormBuilder and want to make sure users are at least 18 years old based on their birthday input.
by ilias
Roweij Spices wanted to have a filter that can choose number of products display per pagination
by ilias
This article will show you how to add dynamic code to your templates using the Elementor Shortcode widget and custom PHP code.