System Fonts

Hi there,

go to Customizer > Typography > Body and select the System Stack font option.
Then in all other Typography settings eg. > Headings change the font to Inherit.

The benefits are that there is no font requests required. Which is great speed improvement.

The Cons' - each different device type ( Mac/Win/Android) uses a different system font

The Cons’ – each different device type ( Mac/Win/Android) uses a different system font.

What does it mean exactly? Will it have an effect on the user experience on my blog?

So this is the font-family that the GP System stack outputs ( this is a very common system stack used in most themes and websites ):

body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

What that does is; tells the browser use one of the fonts here - and the browser will determine which one is its System font and display that.

So whereas a Mac will load the -apple-system UI, Windows will load the Segoe UI etc. And in the case where neither of those fonts are loaded by the system it will fall back to Helvetica, Arial or whatever sans-serif font is loaded.

This ensures whatever device a user visits your site on it will use the main font available.
But this means what font i see on my Mac will be different to what a user on Windows device will see... but as they are system fonts they will generally match the Systems UI fonts - so from a user experience it will match the fonts they generally see in their operating system.