[Resolved] Add font-display:swap; to font-icons.css and minified version

[Brendan]

This is a feature request unless I’m missing a GP customizer setting.

Google pagespeed complains that font-icons.css is missing font-display:swap;. I have to manually add this to font-icons.min.css and font-icons.css after a theme update. Can this be added to these files in future updates?

It’s possible the .css isn’t shipped with font-diplay:swap; included because it might disrupt appearances.

Steps for those who want to fix the Pagespeed notification:

1. Find these files in your GP theme folder:
   /generatepress/assets/css/components/font-icons.css
   /generatepress/assets/css/components/font-icons.min.css
2. font-icons.css – look for font-style:normal; following the @font-face at the very beginning of the file. Add “font-display:swap;” (without quotes) following font-style:normal;
3. font-icons.min.css – as above, look for font-styl:normal following the @font-face. It won’t have a “;” because this file is minified. Add a “;” after “normal” immediately followed by “font-display:swap;” before the closing bracket }.
4. Clear Autoptimize Cache if you use it.
5. Custom Purge Cloudflare cache for these 2 files only, adjusting paths for any customized installations:
   https://www.YOURDOMAIN.com/wp-content/themes/generatepress/assets/css/components/font-icons.min.css
   https://www.YOURDOMAIN.com/wp-content/themes/generatepress/assets/css/components/font-icons.css

[David]

Hi there,

the issue with adding display=swap to an icon font is that the browser has no alternative system font to display. Which, as you rightly point out, could lead to issues with the icon being displayed.

Our preferred solution is to switch the Customizer > General > Icon Type to SVG.
This eliminates the need to load any font as it adds the theme icons as inline SVGs.

But thank you for sharing your method 🙂

[Brendan]

Hi David,

Thanks so much for your reply! Will experiment with that customization.

[David]

You’re welcome!

[Brendan]

Hi David,

Strange – I selected SVG and now two drop-down arrows appear next to each other in my desktop menu. On mobile, I get two hamburger menu icons.

Tried clearing cache, no luck.

Did I miss another setting somewhere?

[Ying]

Hi Brendan,

This sounds like a cache issue.

Can you disable your cache plugin and try to clear server cache and browser cache as well?

[Brendan]

Hi Ying,

Thanks you’re correct. I missed a cache! For anyone else, clear these caches:

1. Autoptimize if installed
2. Cloudflare if active
3. Autoptimize Critical CSS (the one I missed 🙂 )

CriticalCss will need to create new rules for the change to SVG anyway.

[Ying]

Glad you figured it out 🙂

[Author]

Posts