Archived topic

Difference Between System Font Selection and System Stack Contained Within?

7 replies · Started by Oisin on August 8, 2020

Viewing posts 1–8 of 8

August 8, 2020 at 10:22 am #1393168

Hi Guys,

Love the theme, it's soo fast. I am doing a page speed tutorial on using web safe fonts and I'm using GeneratePress in the example.

Can you explain the difference between system fonts and system stack? I thought choosing Arial for Body and Verdana for all headers would yield the same page speed savings as using system stack. Am I missing something? Why would I use System Stack instead of the selection of system fonts offered?

Thanks,

Oisin

August 8, 2020 at 4:37 pm #1393369

Hi there,

They're similar. Those system fonts should mostly exist on your computer by default (depending on OS), so nothing has to be downloaded when your visitor loads your website.

The system font is simply the default font of the OS you're using, so it's the same idea as the others.

Let me know if you have any other questions :)

August 9, 2020 at 12:20 am #1393583

Cheers Tom,

So if I use Arial and Verdana my fonts should display correctly on most devices. But Android will show Roboto and possibly some swap outs on other devices?

What is the system stack? How are they different or what's their advantage? I saw you recommended those in other threads and I couldn't figure out why when there's all those other system fonts to choose from.

I love the technical stuff so please feel free to give me the dev explanation 😉

Thanks,

Oisín.

August 9, 2020 at 6:40 am #1393877

Hi there,

System stack is simply a list of websafe fonts

-apple-system - iOS Safari, macOS Safari, macOS Firefox
system-ui - macOS Chrome, Windows Chrome (new versions)
BlinkMacSystemFont - macOS Chrome
Segoe UI - Windows Vista and newer
Helvetica - macOS versions < 10.11
Arial -  ALL 
sans-serif - ALL 
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol - Emojis

Android automatically falls back to Roboto and ChromeOS uses its own Croscore fonts.

These simply tell the relevant browser to user their specific system font. This is the one you want to choose if you want to always match the current browser UI.

Whereas a System font will rely on the relevant font to be locally installed. If it is not it will use the fallback fonts provided eg.

font-family: Tahoma, Geneva, sans-serif;

So Systems Stack fonts will be explicit whereas System fonts are more 'loosely' followed.

Performance wise - there should be no difference between the two.

March 13, 2021 at 8:46 am #1693812

hello, may I follow up briefly here? When I use system stack, no fonts are made available from my server/website, only from local instances on the users computer? there is therefore no risk of infringing font copyrights?

March 13, 2021 at 9:32 am #1693878

Hi Stephan,

thats correct - System Stack will default to whatever font is installed in the users device. That requires No Requests and has No copyright infringements.

Start building better websites today.