Site logo

Archived topic

Order of "system-ui" in GP system font stack?

3 replies · Started by acela on March 29, 2021

Viewing posts 1–4 of 4

Greetings,

Looking at the current GeneratePress system font stack:

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

...I researched a bit further about "system-ui" and found the following:

https://infinnie.github.io/blog/2017/systemui.html

https://github.com/picturepan2/spectre/issues/666

It's no problem for me as my site is in English – but wondering if this caveat still applies, and if the relative placement of "system-ui" (ahead of "Segoe UI") could cause issues in some other languages?

Cheers

Hi there,

It’s no problem for me as my site is in English – but wondering if this caveat still applies, and if the relative placement of “system-ui” (ahead of “Segoe UI”) could cause issues in some other languages?

If you want to cater to everyone in a more finely tuned manner, then yes.

And if you must change the system stack order, you can use the generate_typography_system_stack filter.

Example:

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';
} );

OK, thanks Elvin – that's great it's easily tunable.

Not an issue for my English site – but just thought to mention it / ask, in case there's any problem for customers using other languages.

Also perhaps something to keep in mind if you consider adjusting the default in the future.

Thanks again.

It's a minor thing so we'll see if it's something to be changed when the need arises. :)

No problem. :D

This archived topic is closed to new replies.