Eliminating Google Fonts for Mobile Speed

Hi there,

Segoe UI is a Windows font.
devices that do not have the Segoe font will fallback to their own system stack font. This varies depending on device and operating system. In this case you're better off just using the System Stack option in the Typography settings.

Document here explains how to add fonts locally:

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

Or ( for google fonts only ) you can do it with the OMGF plugin:

https://wordpress.org/plugins/host-webfonts-local/

I just switched the font of my website to system stack. Is there anything css-wise that I need to add to my style sheet to implement this completely?

Nope - its all done for you by the theme.

Would it be appropriate to add something like this to the customizer in simple css?

body {
    font-family: -apple-system, 
    BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
}

If you want to change the system stack fonts, use this filter:

add_filter( 'generate_typography_system_stack', function() {
    return 'your own system stack here';
} );

Here's the default:
https://github.com/tomusborne/generatepress/blob/b60b853630da6d9015722da903e53c8064148b0a/inc/typography.php#L945

Please forgive me since I am not a developer...I created a snippet and added the following:

add_filter( 'generate_typography_system_stack', function() {
    return '-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
} );

Is this what you are suggesting?

Hi there,

are you wanting to change the default system stack ? If you're not then you DON'T need to add any CSS or PHP snippets.

The thing is, I do not know what the default system stack is, so I don't know whether I need to change it or not...

Are you able to tell me what it is? Is there a place that a non-developer like me can find it?

Please let me know.

Thanks,

Ok - so if you select System Stack in the Typography settings the Theme outputs this font-family stack:

'-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'

This is a commonly used system stack that specifies a font for each of the different OS/Device types out there.

If you wanted to change the stack to the fonts you listed here:
https://generatepress.com/forums/topic/eliminating-google-fonts-for-mobile-speed/#post-1713276

Then you can add this PHP Snippet to your site:

add_filter( 'generate_typography_system_stack', function() {
    return '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif';
} );

Thank you for your thorough answer. That is what I was looking for...

You're welcome