Add font-display: swap to locally hosted fonts

[24xstudio]

Hey,

I want to add font-display: swap to all the locally hosted fonts., font Awesome Icons

Is there any way of doing this? Without manually editing each font file.

Thanks

[Tom]

Hi there,

You can add this to your @font-face declarations in the CSS.

So if it’s a locally hosting font, it means you’ve done something like this:

@font-face {
    font-family: My Font Name;
    ...etc...
}

Just update it like this:

@font-face {
    font-family: My Font Name;
    font-display: swap;
    ...etc...
}

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ferhat]

Hi,
i tried the same and even when i added the css code above to my main stylesheet google pagespeed tester is still showing that issue on my site.

On this page it says that you have to do an additional task to make sure the pagespeed-speed issue will not come again: https://web.dev/font-display/ (Headline: Google Fonts in the middle of the page).
Where do i have to add that: &display=swap parameter on my site?

My Site is https://www.nebenbeionline.de and i want to make sure that my Site is running fast like hell :).

regardly
Ferhat

[Tom]

Hi there,

The first font it’s mentioning are our theme icons. Instead of using font-display, use our SVG icons: https://docs.generatepress.com/article/svg-icons/

The last font it’s mentioning are the social icons by your Social Icons by WPZoom plugin.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ferhat]

Thanks Tom! And keep up the good work.

[Tom]

No problem! Thank you 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts