- This topic has 3 replies, 3 voices, and was last updated 6 months, 4 weeks ago by David.
August 8, 2020 at 10:22 am #1393168Oisin
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?
OisinAugust 8, 2020 at 4:37 pm #1393369TomLead DeveloperLead Developer
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 #1393583Oisin
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 😉
Oisín.August 9, 2020 at 6:40 am #1393877DavidStaffCustomer Support
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.
- You must be logged in to reply to this topic.