New Feature: Update Font Stack

[shubham-kaushal]

Use a font stack that adapts to the operating system it runs on, like Mac, Windows, iOS, or Android.

For example:

• Apple devices will display San Francisco
• Android devices will display Roboto
• Devices running Windows will display Segoe UI
• Machines running Linux will display the default sans-serif font for any running distribution

The following font-stack ensures all browsers can load platform-specific fonts:
-apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif

Use the following ex. CSS to load system fonts and set up browsers for legibility:

html {
  /* Load system fonts */
  font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,
    Roboto, Helvetica Neue, sans-serif;

  /* Make type rendering look crisper */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Disable auto-enlargement of small text in Safari */
  text-size-adjust: 100%;

  /* Enable kerning and optional ligatures */
  text-rendering: optimizeLegibility;
}

/**
 * Form elements render using OS defaults,
 * so font-family inheritance must be specifically declared
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

[tenphi]

Thanks for the issue but it was implemented weeks ago.

--system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Avenir Next", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;