Using system fonts on the web

system-font.scss

html {
  // 12px base unit (others usually make this 10px to simplify their calculations)
  font-size: 75%;
}

body {
  // will be 16px default font-size
  font-size: 1.33rem;
  line-height: 1.2;
  // See: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
  font-family:
    // macOS system font (San Francisco since macOS 10.9)
    BlinkMacSystemFont,
    -apple-system,
    // Android since 4.3
    'Roboto',
    // Linux KDE
    'Oxygen',
    // Linux Ubuntu
    'Ubuntu',
    // Linux GNOME
    'Cantarell',
    // Firefox OS
    'Fira Sans',
    // Android before 4.3
    'Droid Sans',
    // Windows Phone
    'Segoe UI',
    // macOS before 10.11
    'Helvetica Neue',
    // fallback on systems who do not provide any of the above fonts
    'Tahoma',
    // last resort
    sans-serif;
}