[Resolved] How To Speed Up Website Using System Fonts Only?

[David]

Hello
I just understand loading google fonts or any other fonts slow down the website.
How to add system fonts only & it should not load other fonts anywhere on my website.
If I select appearance – customize – typography – body – system fonts, then will it work perfectly? Or do I need to select system stack under the system fonts?
How to check other fonts are not loading?
can you tell me Difference between System Fonts & system Stack?
Thank you.

[Tom]

You should select “System Stack” within those options.

Then make sure all of the other typography elements are set to “inherit”.

That way Google Fonts won’t load, and your website will be much lighter 🙂

[David]

Thank you

[Tom]

You’re welcome 🙂

[Sonja]

Which Font will be showed, if choose System Stack? I want to do avoid Google Fonts because of DSGVO / GDPR.

[David]

Hi Sonja, the current system font stack is:

-apple-system – mac OS
system-ui – current System UI
BlinkMacSystemFont – Mac Chrome
Segoe UI – Windows
Helvetica – mac Legacy
Arial – Any
sans-serif – Any

EMOJIS & SYMBOLS
“Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”

If you don’t want to be limited to System Stack, then you can add Google Fonts locally:

https://docs.generatepress.com/article/adding-local-fonts/

[CRISTO]

I have been using GP premium for over a year, still learning a lot about WordPress, but only just now discovered that the font used can affect load times…thanks for these instructions.

GP has a well-earned reputation for fast loading…might be good advice to beginners like me to mention the font information as well. But maybe it is in your instructions somewhere.

I just switched the fonts on my site according to the instructions above.

[CRISTO]

Now I got myself confused, so is this correct:

Click system stack when I pull up body then all header, H1, H2, H3 are set to inherit?

[Tom]

That’s correct. Anything set to inherit will inherit the option from the Body option.

System stack is definitely the fastest option, as no font has to load as you load the page.

[CRISTO]

Thanks, Tom. Have followed your suggestions.

[Tom]

No problem 🙂

[Matthias]

You should select “System Stack” within those options.
Then make sure all of the other typography elements are set to “inherit”.

@Tom
Is it possible to simply remove the Typography Module to set it to System Stack and everything else inherit?
Or other: What happens if I remove the Typography Module?

Regards Matthias

[Tom]

The Typography module simply adds the options to the Customizer.

You can absolutely set the body to system stack and everything else to inherit (this is the default setup).

[Author]

Posts