Home>Support>Add font display to widget fonts and icons

Add font display to widget fonts and icons

By Silvia Spoerl, 5 years ago. Last reply by Andrew Misplon, 5 years ago.

Hi,

As per google page speed insights recommendations, I would like to add font display swap CSS feature.

One for example wp-content/plugins/so-widgets-bundle/css/slider/fonts/slider.woff?8p86w5

another example:

wp-content/plugins/so-widgets-bundle/icons/fontawesome/webfonts/fa-brands-400.woff2

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 5 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Hi Silvia

    Thanks for reaching out.

    As far as I’m aware, font-display: swap isn’t applicable for font icons like the slider icons or Font Awesome Brands.

    Here is an explanation of why that’s the case: https://www.zachleat.com/web/font-display-icon-fonts/.

    When you load an icon font, you often never want the fallback text to render. It isn’t a typical Flash of Unstyled Text (FOUT) scenario. If the fallback text for an icon font renders, who knows what you might see.

    Hope that helps.

  2. 5 years, 1 month ago Silvia Spoerl

    Hi Andrew, thanks for the advice.

    In this case, is it possible to limit the icon families to only font awesome so that only the font awesome icons are loaded?

  3. 5 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Hi :) The font families loaded are a function of the icons selected in the widgets you’re making use of. Have you tried Autoptimize? Be sure to check your site’s functionality after changing any of the Autoptimize settings.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More