diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
index d5134afc7a6..ab3105cd83c 100644
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -36,6 +36,7 @@ body,
   color: $base-color;
   word-wrap: break-word;
   font-size: $font-size-base;
+  font-family: -apple-system;
   font-family: $font-family-base;
   line-height: $line-height-computed;
   text-rendering: optimizeLegibility;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7af0c748947..52674293edb 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -16,8 +16,9 @@ $dark:                            #444 !default;
 // Base
 // -------------------------------
 
-$font-family-sans-serif:          "Helvetica Neue", "Roboto", "Segoe UI", sans-serif !default;
-$font-family-light-sans-serif:    "HelveticaNeue-Light", "Roboto-Light", "Segoe UI-Light", sans-serif-light !default;
+$font-family-sans-serif:           '-apple-system', "Helvetica Neue", "Roboto", "Segoe UI", sans-serif !default;
+
+$font-family-light-sans-serif:    '-apple-system', "HelveticaNeue-Light", "Roboto-Light", "Segoe UI-Light", sans-serif-light !default;
 $font-family-serif:               serif !default;
 $font-family-monospace:           monospace !default;