[Hummingbird Pro] High desktop score low mobile score & Ensure text remains visible during web

I have a 94 score for desktop and a 39 for mobile.
I cleaned up a ton of the webfont issues by using the plugin “OMGF | Optimize My Google Fonts” I am stuck with 4 fonts that I can’t seem to fix
https://mortensenlawoffices.com/wp-content/plugins/wp-review-slider-pro/public/css/fonts/wprevpro.woff2

https://mortensenlawoffices.com/wp-content/themes/jupiterx/lib/assets/fonts/jupiterx.woff2

https://mortensenlawoffices.com/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-solid-900.woff2

https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H2TbFhsqMA.woff2

Any and all suggestions and help is welcome

  • Nithin Ramdas
    • Support Wizard

    Hi Charles ,

    These need to be fixed within the source files by editing the CSS where the fonts are included and adding the property of font-display: swap; as explained in the following doc:
    https://web.dev/font-display/

    Unfortunately, there isn’t any easy way to determine which file loads these fonts, checking the source CSS files for font-face should help in finding these fonts, however, the downside is once the theme or plugin is updated these changes will be lost. This is something which needs to be fixed within the theme and plugin files.

    So would highly recommend you bring these into your theme and plugin supports attention.

    One link listed above is a font-awesome icon fonts from Elementor plugin. When it comes to web fonts that load icons, I’m afraid there isn’t an acceptable fallback for such cases. Using font-display: block is recommended when it comes to loading icons, which seems to be the default.

    So there isn’t much that could be done for font-awesome icon fonts, you can find more info regarding this in their GitHub:
    https://github.com/FortAwesome/Font-Awesome/issues/15085

    I hope this helps. Please do let us know if you have any further query.

    Kind Regards,
    Nithin