Typography Settings In Helix, Google Fonts Slow Loading - Question | JoomShaper

Typography Settings In Helix, Google Fonts Slow Loading

Karen Dunne

Karen Dunne

Helix Framework 3 years ago

Hello,

When using the typography settings in Helix to choose Google fonts, I see that the entire library of a font family is loaded even though one weight and style is selected.

For example, on https://choicebuildersgroup.com/ the body is set to Source Sans Pro, normal, normal. See screenshot.

But they all appear to be loaded regardless of whether this option is selected, i.e. https://fonts.googleapis.com/css?family=Source+Sans+Pro:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&display=swap

What is a subset and does need to be selected? What is the best way to set fonts for the fastest page load speed?

Thank you,

Karen

0
13 Answers
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #2754

Hi there,

Thanks for contacting us. Sorry for the inconvenience. Please check the screenshot to attach the image.

https://prnt.sc/x77czv

Besides, Please provide me the Joomla administrator access to check the issue.

-Thanks

0
Pavel
Pavel
Accepted Answer
3 years ago #2756

What is the best way to set fonts for the fastest page load speed?

Hi. The best way is to download the font, place it on your site and include it via css. Any connection from a third-party resource like google fonts slows down the loading of the site. Use the Helix guide to place your custom font

0
Karen Dunne
Karen Dunne
Accepted Answer
3 years ago #2972

Thank you Pavel.

Toufiq, the option to attach does not appear for me, must be the permissions I suppose, see https://prnt.sc/x8utbv

The login credentials are in the hidden section.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #3072

Please disable the rocket loader from your Cloudflare SSL certificate.

0
Karen Dunne
Karen Dunne
Accepted Answer
3 years ago #4638

Hello Toufiq,

It took me a while to follow what you were suggesting so my reply has been delayed.

That site is not using Cloudflare so there's nothing to disable there.

Can you think of any other reason why the entire font library is loaded instead of just the one selected in Helix?

Also, the editor still doesn't have the option to attach. See https://prnt.sc/x8utbv

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #4751

Can you share a screencast video about the full scenario? Thanks

0
Karen Dunne
Karen Dunne
Accepted Answer
3 years ago #4967

Hi Toufiq,

Here is a screencast: https://screencast-o-matic.com/watch/crnnbkRyL3

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #5574
0
Dmitry Goncharov
Dmitry Goncharov
Accepted Answer
3 years ago #5578

Make it easy to connect your fonts to the site by downloading a font file. Then you will be able to download only the desired style without connecting third-party services.

0
Karen Dunne
Karen Dunne
Accepted Answer
3 years ago #5695

Thank you Dmitry.

I don't think my question was conveyed. I was in fact expecting Helix to load just the weight selected and not the whole font family. So the answer to that is when using Helix to select a font, the entire font family will be loaded.

0
Pavel
Pavel
Accepted Answer
3 years ago #5766

Hi Karen. There are no settings for this. If this question interests you for an existing site, and you do not want to waste time, then use the advice that Dmitry and I gave. This is the only option. Trust experience. Maybe it can be done in Helix Ultimate 2.0 if the team adds it to the roadmap. But in the current version of Helix Ultimate, this is not possible.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #5869

@Pavel I am also agree with you. Thanks

0
Dmitry Goncharov
Dmitry Goncharov
Accepted Answer
3 years ago #5872

It is difficult for beginners to understand the connection of their fonts. The JS team needs to consider a feature that makes it easier to load their fonts. By selecting the font file on the computer.

0