Hello Pascal

Please go to Template Options -> Custom Code -> Custom CSS and add this CSS. Hopefully, this issue will be solved.

@font-face {
  font-display: swap !important;
}

Best regards

Thank you,

Did add the css but does not change? These 3 still show up in pagespeed /components/com_sppagebuilder/assets/webfonts/fa-brands-400.woff /components/com_sppagebuilder/assets/webfonts/fa-regular-400.woff /components/com_sppagebuilder/assets/webfonts/fa-solid-900.woff Any suggestions how to solve this?

I also have saw the option for a api key to update font list? Should I use this to fix this maybe? and how do I get a Google Font API ?

Regards, Pas

Not sure about it. To update Google Font API, you need to get your API from here: https://developers.google.com/fonts/docs/developer_api

Is it required to use?

It is not required. It is only needed, when you want to update the font list.

Still have some issues with fonts.gstatic.com

I use Shaper_helixultimate and have all typography option disabled. In template custom code I added this but think it does nothing: @font-face { font-display: swap !important; }

Looking at template folder - fonts I have this:

• FontAwesome.otf
• fa-brands-400.ttf
• fa-brands-400.woff
• fa-regular-400.ttf
• fa-regular-400.woff
• fa-solid-900.ttf
• fa-solid-900.woff
• fontawesome-webfont.eot
• fontawesome-webfont.svg
• fontawesome-webfont.ttf
• fontawesome-webfont.woff

In pagebuilder I mainly use fonts: barlow, fa-brands, fa-regular and fa-solid

Site is multilanguage and has 2 templates (page+blog) for each language.

What's the best way to load these fonts using this setup?

Thanks in advance,

Pascal

Hi, any suggestions to this issue? Is it possible to remove all fonts and load fonts seperate?

Regards, Pascal

Hi. With easy You can only disable FontAwesome from SPPB options, And use png images instead of font icons. If you cut-off font awesome from template as well.

In general only .woff or .woff2 is loaded, not all font as you see in that folder.

But sorry we cannot help you with FontAwesome nor php code customization.

Thanks Paul,

Still not sure I'll understand...sorry.

How can I make sure no fonts or fontawesome is loaded automatic by pagebuilder or helix?

I want to use only 1 font for all templates/languages and load this from my own server, how can I do this? Should it be done like this: https://archive.joomshaper.com/forums/load-google-fonts-from-local

And can this also be done with only a selection of used fontawesome icons?

Thanks in advance, Pascal

Pascal, what template you have there? I think easier would be to cut off FA from template than SPPB. Especially if you don't use FA icons inside menu items.

Hi Paul, I use Shaper_helixultimate and have all typography option disabled. Guess there will be some FA icons used but max 10 so rather load this from server also. And hopefully gain max optimization and speed.

Thanks.

Hi Paul,

Any suggestions... I want to use only 1 font for all templates/languages and load this from my own server, how can I do this? Should it be done like this: https://archive.joomshaper.com/forums/load-google-fonts-from-local

Thanks, Pascal

Yes, use my tips, they are still current.

https://www.joomshaper.com/documentation/helix-framework/helixultimate#faq-how-to-do

Read tips: How to use a custom font(s) | | How to use Google Fonts from my server

About FA - in theory you could edit FA file: templates\shaper_helixultimate\css\font-awesome.min.css

and remove all icons which you don't use. And keep only 10-15. But this file has only 30Kb. So how many you would save 25KB. Does it worth your time?

Edition of this file: templates\shaper_helixultimate\fonts\fontawesome-webfont.woff2

is much more complicated.