[Resolved] Difference Between System Font Selection and System Stack Contained Within?

Home Forums Support Difference Between System Font Selection and System Stack Contained Within?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1393168
    Oisin

    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

    #1393369
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1393583
    Oisin

    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.

    #1393877
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.