Font Icons font-display

Lighthouse flagging CLS and core web vital issues with lack of font-display:block present in the icon webfonts in Bricks.

After having added these values in the parent to test, the issue disappeared in Lighthouse.

1 Like

font-display: swap;

After adding manually in themify-icons.min.css, PageSpeed does not show an error.

All optimization plugins add “font-display: swap;” for fonts. Why isn 't this in Bricks ? It seems like everything is simple or am I wrong?


@robp, @clickfusion63 - I’m getting the same issue. " Ensure text remains visible during webfont load"

Could you provide a little more detail on how you manually made this go away?

after @font-face{
add font-display: swap;

The Council. Use icon libraries only for the prototype. At the end, replace everything with SVG

1 Like

Thanks. I assume you put this mod in your child theme?

100% on the SVG. Been going through and replacing everything with uploaded SVG.

1 Like

Still getting this issue. Did you resolve yours in the child theme in the end?

Every Bricks update I again have to enter the code above into the two files (Themify and ionicons) in the css libs directory.



What a nightmare. Can you override in child theme? I tried this but it doesn’t seem to notice it :frowning:

Well, it takes me 60 seconds, so it could be worse.

Never tried to put the css file into the child theme.



1 Like

Sure, but that’s not a good method for a long term fix given how easy this would be for Bricks to add the option surely :confused:

I tried using a child theme, but wasn’t able to override it. I wonder if the legend that is @aslotta knows of a way around this?

Updated to V1.9, had to manually add font-display:swap again.

Oh, seriously?.. @aslotta any progress on this one for the next update dude?

got the same problem, any updates?

1 Like

litespeed cache adds the font-display:swap rule for my last few sites, but this shouldn’t be required and doesn’t help 99% of users not using that plugin.