Using system font stack for a website

This is an interesting idea that I'm seeing more often. Instead of requiring web visitors to download font files, you specify a font they already have and which matches their OS.

It's fast because you aren't downloading font files, and the font will match the look and feel of their current OS. Mac users may see San Francisco or Helvetica, Windows users might see Segoe UI or Tahoma.

It's easy to implement, here are two techniques

Method 1 - Using Font Family

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Method 2 - @font-face

@font-face { 
 font-family: system; 
 font-style: normal; 
 font-weight: 300; 
 src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); 
} 

/* Now, let's apply it on an element */ 
body { font-family: "system"; 
}

See this Code Pen post for more details, credit for @font-face technique: Jonathan Neal