Ensure text remains visible during webfont load

I looked this over, and there are some instructions at the bottom of the list, but I have no idea what to do with the instructions. Where would I find @font-face or the font display property?
I would prefer not to load all the Google fonts since I am not using them. Would I then have to do something for each of the fonts that I want separately? HELP!

  • Nahid
    • Tech Support

    Hey there Carolyn !
    I hope you are having a great day!

    Thank you very much for your queries. I’ll try my best to address them in the following:

    Where would I find @font-face or the font-display property?

    @font-face is a CSS-rule which is used to define the font (and its styles) that will be used throughout the website. Its definitions can be usually found within the CSS files, mostly in your theme and in some cases, a few plugins.

    Explanation: I ran a test for your website in Google’s PageSpeed Insights and found out which fonts were referred to in this case. Here’s a screenshot for reference:

    This is a screenshot taken from the Google PageSpeed Insights test. As you can see in the screenshot, if you hover over the font sources, it will show you the detailed path of the font file from where it is loaded. The first font is loaded from the WPTouch plugin, the second and the last ones are icon fonts loaded from the Elementor plugin. Normally, these fonts would be declared via @font-face in their respective plugin CSS files.

    Solution: The best approach to address the addition of font-display in these third-party plugins would be to get in touch with their support, show them the report and requesting them to add it in an upcoming update. The reason I’m suggesting this approach is because if you go ahead and manually edit the plugin code to include font-display, your changes will be wiped off in the next plugin update.

    I would prefer not to load all the Google fonts since I am not using them. Would I then have to do something for each of the fonts that I want separately?

    According to the Google PageSpeed Insights test, your website is actually using a couple of Google fonts, here’s another screenshot for reference:

    fonts.gstatic.com is actually a source for Google fonts and I believe Elementor is loading them on your site. However, the solution for Google fonts is a bit simpler. You can simply use a plugin like this which automatically adds the required font-display property to the Google fonts declarations.

    Hope this helps. Please let us know if you need any further assistance regarding this. Thanks!

    Kind regards,
    Nahid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.