system fonts across platforms

system_fonts.css

:root {
  --system-sans-serif:
    system-ui,            /* detect system font automatically */
    -apple-system,        /* Safari (Mac OS X and iOS) and Older Mac OS X */
    BlinkMacSystemFont,   /* Chrome<56 (Mac OS X) */
    "Segoe UI",           /* Windows and Windows Phone */
    "Roboto",             /* Android and Chrome OS */
    "Oxygen",             /* KDE    - Linux environment */
    "Ubuntu",             /* Ubuntu - Linux distribution */
    "Cantarell",          /* GNOME  - Linux environment */
    "Fira Sans",          /* Firefox */
    "Droid Sans",         /* Older Android */
    "Helvetica Neue",     /* Older Mac OS X */
    sans-serif,
    "Apple Color Emoji",  /* Mac OS X Emoji fallback */
    "Segoe UI Emoji", "Segoe UI Symbol";  /* Windows Emoji fallback */
  
  --system-serif:
    "Apple Garamond",
    "Droid Serif",
    "Source Serif Pro",
    serif,
    "Apple Color Emoji",  /* Mac OS X Emoji fallback */
    "Segoe UI Emoji", "Segoe UI Symbol";  /* Windows Emoji fallback */
    
  --system-monospace:
    "SFMono-Regular",
    "Menlo",
    "Consolas",
    "Courier New",
    "Courier",
    monospace,
    "Apple Color Emoji",  /* Mac OS X Emoji fallback */
    "Segoe UI Emoji", "Segoe UI Symbol";  /* Windows Emoji fallback */
}

body {
  font-family: var(--system-sans-serif);
}

/** SYSTEM FONTS ACROSS PLATFORMS
  *  This font stack detects system fonts across operating systems.
  *
  *  This is faster than downloading new fonts, making it a viable option for a default font.
  *  Matching system fonts is alleged to give users a "comfortable" feel.
  *  These also fall back to emoji fonts for characters outside the standard unicode range.
  *
  *  https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
  *  https://css-tricks.com/snippets/css/system-font-stack/
  *  https://v4-alpha.getbootstrap.com/content/reboot/#native-font-stack
  **/