Shahin

Hello @reiseabenteuerlich,

Thank you for the update.

This topic has been forwarded to the developer team,
and we’ll get back to you with the information once it is available.

I appreciate your patience.
Best Regards

Hello @marcinek28,

Thanks again for reaching out, and for the patience.

I’m sharing the reply I got from our dev team in full.

We understand the desire to chase the perfect scores. However, it’s important to understand that those results are recommendations and suggestions, and not an absolute source of truth.

#1 OceanWP avoids using ‘swap’ for icons on purpose

Leaving out the ‘swap’ when it comes to Font Awesome icons was done on purpose, and this is not the case just with OceanWP, but there’s a reason for it.

Google’s PageSpeed is nothing more than an automated simulation that uses general scanning rules.

If the tool sees web font file formats, such as ‘.woff2’, it will automatically add a suggestion (or warning if you wish), that it must use ‘swap’ in order to remain visible while the text is loading.

However, icons are NOT text, and such tools don’t know the difference between a regular font like Roboto and an icon font like FontAwesome.

When you use the ‘swap’ rule in combination with regular fonts, your browser is using your own system fonts as a replacement until your actual font is loaded, so that the text is visible until the stylesheets are loading in the background.

But, when it comes to icons, the browser has absolutely nothing to swap the icons with since it’s not text.

#2 Available options

Basically, you have 3 options at your disposal:

1. You can continue using Font Awesome as is, with a better understanding how tools like PageSpeed operate and why this is “flagged” in the first place. And you can ignore the suggestion entirely.

2. Instead of using Font Awesome, you can opt-in for OceanWP SVG Icons, that you can enable via Customize > Site Style & Settings > Site Icons, then select OceanWP SVG Icons from the dropdown. Ensure this stylesheet is not disabled via Customize > Performance.

3. If you want to continue using Font Awesome icons, but only “remove” PageSpeed suggestions, you can apply the following snippet to your child theme’s functions.php file:

/**
 * Force font-display: swap for OceanWP Font Awesome
 *
 */
function oceanwp_master_fa_font_display_swap() {
    // All FA variants.
    $custom_css = "
        /* Font Awesome 6 - Regular & Solid */
        @font-face { font-family: 'Font Awesome 6 Free'; font-style: normal; font-weight: 400; font-display: swap; }
        @font-face { font-family: 'Font Awesome 6 Free'; font-style: normal; font-weight: 900; font-display: swap; }
        @font-face { font-family: 'Font Awesome 6 Brands'; font-display: swap; }

        /* Font Awesome 5 - Regular & Solid */
        @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 400; font-display: swap; }
        @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; font-display: swap; }
        @font-face { font-family: 'Font Awesome 5 Brands'; font-display: swap; }

        /* Legacy & v4 Compatibility Fonts */
        @font-face { font-family: 'FontAwesome'; font-style: normal; font-weight: 400; font-display: swap; }
        @font-face { font-family: 'FontAwesome'; font-style: normal; font-weight: 900; font-display: swap; }
        @font-face { font-family: 'FontAwesome'; font-display: swap; }
    ";

    // Inline style injection via WordPress handles.
    $handles = array('font-awesome', 'fontawesome', 'oceanwp-font-awesome');
    foreach ( $handles as $handle ) {
        if ( wp_style_is( $handle, 'enqueued' ) ) {
            wp_add_inline_style( $handle, $custom_css );
        }
    }

    // Force late header printing to prevent caching plugins from stripping the rules.
    echo "<style id='oceanwp-fa-master-swap'>" . $custom_css . "</style>";
}

// Hook into enqueue and header printing lines to ensure entire coverage.
add_action( 'wp_enqueue_scripts', 'oceanwp_master_fa_font_display_swap', 999 );
add_action( 'wp_head', 'oceanwp_master_fa_font_display_swap', 9999 );

#3 Important disclaimer about using the step 3. ie. applying the PHP snippet

We need you to understand that if you choose to enforce the PHP snippet in order to remove the PageSpeed recommendations, the following may happen:
– some FA stylesheets may still load due to legacy FA versions, as well as older FA versions which are still kept for compatibility with other plugins.
– during page load, your icons may be displayed as boxes, or boxes with ‘text’, or the actual icon code may be displayed, until the stylesheets are loaded in full.
– this method may not only affect your users experience (seeing weird ‘text’ in place of icons) but it can also affect your CLS scores.

Crucial: after applying the snippet, you must clear cache on ALL levels: CDN, website (via hosting and/or caching plugins), and browser. You must also regenerate Critical CSS or Unused CSS if you have optimization plugins installed and are using these features.

Our recommendation in this case would be to either ignore the suggestions or use OceanWP SVG Icons instead of Font Awesome.

However, the final decision rests with you.

Best Regards

Hello @marcinek28,

Appreciate your update.

This has been escalated to the developer team, and we’ll get back to you with more information as soon as it’s available.

Thank you for your patience.
Best Regards

Hello @phoenixblue,

Thank you for reaching out.

Unfortunately, the information provided is insufficient to understand or troubleshoot the issue you are facing.

Would you please provide us live URL from the issue.
Also, share some screenshots or short video of the issue you faced step by step?

You can upload your files to one of the following online services:
https://drive.google.com
https://wetransfer.com
https://dropbox.com

Once you have those details, let us know and we’ll take it from there.

Please keep us posted.
Best Regard

Hello @aduwow,

Thank you very much for taking the time to submit a compatibility report about this deprecation notice, as well as providing a potential solution for the compatibility patch.

We understand you already know this is a warning and will not cause a fatal error, but for anyone else reading this thread, it is worth noting that this is a notice for a change that will eventually become a stricter error in future PHP versions.

While PHP 8.5 was released at the end of last year, it is still considered very ‘fresh’ and hasn’t been adopted by the majority of hosting providers just yet.

We currently recommend keeping production sites on PHP 8.3 or 8.4, as this is the safest bet for ensuring a stable environment right now. Of course, testing with PHP 8.5 on staging or test sites is absolutely welcome (and appreciated).

Proactive reports like yours are incredibly valuable and help us future-proof all our plugins.

I have passed this along to our dev team for evaluation, and we will definitely include a fix for this in one of our upcoming releases.

If you notice any additional warnings or potential issues, feel free to reach out any time.

Thanks again for your contribution.
Best Regards

Hello @vanbrel,

Thank you for reaching out.

I have fully examined the issue you raised but was unable to replicate it on my end. Additionally, no similar issues have been reported by other users so far.

To help us better understand your website’s setup and the exact issue you are encountering, could you please provide us with your system environment information? You can easily find this by navigating to your WP Dashboard > Tools > Site Health, selecting the Info tab, and clicking the “Copy site info to clipboard” button. You can paste that information directly here as code, or upload it to Pastebin site or GitHub Gist site and share the link with us (feel free to remove your email address from the content before sharing). Here is a quick visual guide to help you find it: https://i.postimg.cc/fbjtkFyJ/image.png

Please note that, these are just warnings and notices; they will not harm your website or affect its functionality. If you’d like to hide them from your visitors, you can simply turn off the WordPress debugger by following this guide: https://ww.wp.xz.cn/support/article/debugging-in-wordpress/#wp_debug. Alternatively, you can configure the debugger to log errors into a private debug.log file instead of displaying them on the front end of your website.

Once we have this information, we will be able to proceed with more targeted troubleshooting.

Please keep us updated.
Thank you.
Best Regards

• This reply was modified 2 weeks, 6 days ago by Shahin.

Hello @aipe,

Thank you for reaching out.

While “max-width: 3000px” may not be technically invalid,
it is not a standard practice and we generally avoid using such values.

This seems to stem from your previous customizations.
If possible, please provide a live URL where the issue is occurring so we can investigate further.

Additionally, if the CSS you mentioned is present in Customizer > Custom CSS, please remove it and clear your cache.

Hope it helps.
Best Regards