Reply To: System Font Stack

I maybe wrong but System Fonts (SYSTEM FONT STACK) tells the website to revert back to the Operating System fonts the device is using that accesses the website.

For example if my website used a System Font Stack and I use an iPhone to view a website with System Fonts then the iPhone displays text on my website in its native font (-apple-system (San Francisco)). If I use Google Chrome on Android to view the website it would display text using the native font (Roboto) of Google Chrome on Android. Each system uses its own fonts. This means there are no fonts to download increasing speed of the website.

System fonts: Free, look pretty darn good as they match the OS, and no download time required! They are used by GitHub, Bootstrap, Medium, Ghost, Booking.com (read their system font story), and even your WordPress dashboard. In my personal opinion system fonts look slightly better on macOS versus Windows.

They feel just like your OS because they are using native fonts. Many of the modern operating systems choose fonts very wisely and all have a very sleek look and feel to them. It’s not like defaulting back to a web-safe font of Arial or Times New Roman. Trust me, nobody wants to see Times New Roman on a website.

This is how a web font may be used by CSS
font-family: "Open Sans","Helvetica Neue",sans-serif;

This is how a System font may used by CSS
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Wordpress Dashboard uses the following System font.
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

We believe this would make WoodMart Theme even faster!

Here is an example of implementation using @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";
}

Here is the website on using @font-face:

https://css-tricks.com/snippets/css/system-font-stack/