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

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

Home Forums Support How To Speed Up Website Using System Fonts Only?

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #550802
    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.

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #550988
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #557614
    David

    Thank you

    #558045
    Tom
    Lead Developer
    Lead Developer
    #589985
    Sonja

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

    #590001
    David
    Staff
    Customer Support

    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/

    #607449
    Cristo Rey

    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.

    #607484
    Cristo Rey

    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?

    #607743
    Tom
    Lead Developer
    Lead Developer

    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.

    #607956
    Cristo Rey

    Thanks, Tom. Have followed your suggestions.

    #608202
    Tom
    Lead Developer
    Lead Developer
    #1703508
    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

    #1704087
    Tom
    Lead Developer
    Lead Developer

    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).

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.