Use swap as font-display to Google Fonts on Elementor

[edpittol]

Elementor uses the function the class Elementor\Frontend::enqueue_google_fonts to enqueue the Google Fonts used on the website. It doesn't consider to use the font-display: swap to display a system font while the webfont is loaded.

The challenge is develop an otimization inner Cwv_Perf_Optimize\Elementor namespace to load Google Fonts on Elementor with font-display: swap property.

How to reproduce

1. Download Duplicator zip package and installer.php
2. Clone the project
3. Create the public directory on the root of the project
4. Make public directory writable: chmod 777 public/
5. Move the Duplicator zip package and installer.php to public directory
6. Up the server: docker-compose up -d server
7. Access Duplicator installer: https://localhost/installer.php
8. Run the installation process. Use db as database password
9. Access admin to finish the process. The credentials are admin / admin
10. Access the homepage: https://localhost/
11. Go to Network tab on Developer Tool and filter by swap
12. The list of request is empty

Expected

The Google Fonts request should be shown on request list when filtered by swap.

Reference

• https://web.dev/font-display/