Font Preload Mesocolumn

I cannot change the topic. But now I only need to Ensure text remains visible during webfont load. It is important for me because altough my mobile pagespeed score is 84 and desktop pagespeed score is 98, FCP and FID are still more than 3 seconds.

The only problem with my website is Flash of Invisible Text (FOIT) now. How can apply the second option in this document.

I have solved the problem. Let me explain for other mesocolumn users.

1) I managed to preload the fonts via fast velocity minify plugin.

2) I managed to prevent FOIT by adding css code. In order to add css code;

Go to font-awesome.css and font-awesome.min.css files. The path is themes > mesocolumn > lib > scripts > font-awesome > css.

Add font-display: swap; under @font-face

That is all. No more pagespeed caution for font preload and FOIT.

Indeed the problem not resolved. Just pagespeed does not show the issue when the pagespeed is above a certain value. I have to do font-display: swap; for the following files. Because my FCP (First Contentful Paint) is around 3 seconds although mobile page is loaded fast. And there is not any other serious caution on pagespeed.

example.com/wp-content/plugins/woocommerce/assets/fonts/star.woff

example.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf

example.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff

example.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf

example.com/wp-content/themes/mesocolumn/lib/scripts/font-awesome/fonts/fontawesome-webfont.woff2

example.com/wp-content/themes/mesocolumn/lib/scripts/font-awesome/fonts/fontawesome-webfont.woff

example.com/wp-content/themes/mesocolumn/lib/scripts/font-awesome/fonts/fontawesome-webfont.ttf

example.com/wp-content/themes/mesocolumn/lib/scripts/font-awesome/fonts/fontawesome-webfont.woff2

yeap, font-display: swap; will take off few sec from google speed test. noted this incase update on mesocolumn needed, thx