font issue - Forum | JoomShaper
Staff replied SP Page Builder

font issue

Asked by Pascal 5 years ago Last activity 5 years ago

Hi,
Optimizing my site with JCH Optimize Pro and while checking my site with pagespeed this shows every time:
Ensure text remains visible during webfont load
/components/com_sppagebuilder/assets/webfonts/fa-solid-900.woff

Solution: font-display: swap;

How can this be done and where?

using shaper_helixultimate with latest joomshaper.

Thanks,
Pas

14 replies

Oldest first Newest first Most helpful
Ofi Khan Staff
5 years ago

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

Pascal Asked this
5 years ago

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

Pascal Asked this
5 years ago

Is it required to use?

Ofi Khan Staff
5 years ago

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

Pascal Asked this
5 years ago

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

Pascal Asked this
5 years ago

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

Regards,
Pascal

Paul Frankowski Senior Staff
5 years ago · edited

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.

Pascal Asked this
5 years ago

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

Paul Frankowski Senior Staff
5 years ago

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.

Log in to reply.